Modifiers

These are the common modifiers that are visualisation agnostic. There are individual modifiers per visualisation type that you can see by viewing the documentation for your required visualisation.

Chart

The layout of the chart will require some manual fine-tuning depending on the length of your axis tick labels, whether you are showing a legend and whether you are adding axis labels. The two options to be most aware of are the domainPadding and padding attributes. These options allow you to add padding to the individual axes (to inset the data to stop it cropping on the right or running over the axis on the left), as well as padding the chart away from the viewBox.

Axes

If you add axis labels, you will need to configure modifiers.chart.padding (primarily left and bottom) to reflow the axes correctly, along with adding axisLabelPadding to the xAxis and/or yAxis modifier to offset the label away from the axis line.

Legends

If you enable legends, modifiers.chart.padding will need to be adjusted (top or bottom, depending on your verticalAlignment), with granular control of the legends y-position available with verticalPositionAdjustment. If you set horizontalAlignment to center|right, you should add renderedWidth (inspect the legend element to find its width), which will ensure your legend is properly aligned to the center or the right.

You can pass any React element to dataComponent, which will replace the default square for the series label. Victory provides a variety of props to its data component.

Defaults

All charts adopt the same set of common modifiers, mostly to set up some basic props and provide some basic padding to provide space for the dependent and independent axes. The defaults are outlined below.

Note that some chart types have additional modifiers set by default, though these are defined per chart and not globally for all charts.


modifiers: {
    animate: {
        enable: false,
    },
    chart: {
        padding: { left: 50, bottom: 28, right: 10, top: 10 },
    },
    yAxis: { orientation: 'left' },
    xAxis: {
        orientation: 'bottom',
        fixTickLabelOverlap: true,
    },
    tooltip: {
        showTooltips: true,
    },
}

Modifier overrides

You can set default modifiers for all charts in your provider in your ChartsProvider, which also includes the ability to set default modifiers at responsive breakpoints. You can view the modifiers available to you by looking at the relevant modifiers for your chart type.


<ChartsProvider
    config={{
        height: ...,
        forcedWidth: ...,
        animate: { ... },
        chart: { ... },
        yAxis: { ... },
        xAxis: { ... },
        tooltip: { ... },
        legend: { ... },
        bar: { ... },
        line: { ... },
        stack: { ... },
        area: { ... },
        xs: {
            animate: { ... },
            chart: { ... }
        },
        md: {
            ...
        },
        ...
    }}
/>

Full API

Name	Type	Default
`height`	`number`
`legend.showLegend`	`boolean` Should the legend show?	`false`
`legend.renderedWidth`	`number` When horizontalPosition is set to `center` or `right`, renderedWidth must be defined to ensure that the legend is correctly positioned.
`legend.horizontalPosition`	`"center" \| "right" \| "left"` The position of the legend on the horizontal axis.
`legend.verticalPosition`	`"top" \| "bottom"` Set whether the legend be positioned above or below the chart.
`legend.verticalPositionAdjustment`	`number` When assigning verticalPosition to `bottom` this prop allows granular control of the offset of the legend to the bottom of the chart.
`legend.legendData`	`readonly any[] \| undefined` The series data to be displayed in the legend.
`legend.legendColorScale`	`ColorScalePropType` The color scale to be used for the legend. This will be mapped to the series data.
`legend.itemsPerRow`	`number` Define how many items to show per row on the legend, the default will run all series on one line without wrapping them.
`legend.dataComponent`	`React.ReactElement` Provide a custom series data icon, rather than the default coloured square.
`yAxis.orientation`	`"right" \| "left"` Set the position of the y-axis to the left or right of the chart.	`left`
`yAxis.axisLabel`	`string` Provides a label for the y-axis.
`yAxis.axisLabelPadding`	`number` Provide offset padding to the axis label from the y-axis line.
`yAxis.tickFormat`	`any[] \| ((tick: any, index: number, ticks: any[]) => string \| number) \| undefined` Specify how tick values should be formatted. This is likely to be function that takes a value and returns a formatted string, i.e. `tickFormat={(x) => {}}`.
`yAxis.domain`	`[number, number]` Manually specify the range of data the chart will include, given as an array of the minimum and maximum expected values. This will override the default domain calculation which works out the minimum and maximum values from the supplied data. If you pass a minimum or maximum value that is more or less than the minimum or maximum value in the data, the chart will still include the minimum or maximum value from the data.
`xAxis.orientation`	`"top" \| "bottom"` Set the position of the x-axis to the top or bottom of the chart.	`top`
`xAxis.fixTickLabelOverlap`	`boolean` Dynamically adjust how many ticks show to prevent collision of ticks.
`xAxis.axisLabel`	`string` Provides a label for the x-axis.
`xAxis.axisLabelPadding`	`number` Provide offset padding to the axis label from the x-axis line.
`xAxis.tickCount`	`number` Define approximately how many ticks to show on the x-axis. Prioritizes returning “nice” values and evenly spaced ticks over an exact number of ticks.
`xAxis.tickFormat`	`any[] \| ((tick: any, index: number, ticks: any[]) => string \| number) \| undefined` Specify how tick values should be formatted. This is likely to be function that takes a value and returns a formatted string, i.e. `tickFormat={(x) => {}}`.
`xAxis.tickPadding`	`number` Specify how many pixels apart the ticks should be spaced..
`xAxis.tickAngle`	`number` Specify an angle that the ticks should be rotated to.	`0`
`xAxis.textAnchor`	`"start" \| "middle" \| "end" \| "inherit"` Specify the point within the text that should align with the x-coordinate of the label’s position.
`xAxis.domain`	`[number, number]` Manually specify the range of data the chart will include, given as an array of the minimum and maximum expected values. Note you should only attempt to apply this property if your independent domain is numeric.
`xAxis.offsetY`	`number` Manually specify how far from the edge of its calculated position an axis should be offset in the y direction.
`chart.domainPadding`	`ForAxes<PaddingType>` Specify a number of pixels of padding to add to the beginning or end of a domain. This prop is useful for explicitly spacing data elements farther from the beginning or end of a domain to prevent axis crowding. https://formidable.com/open-source/victory/docs/common-props#domainpadding
`chart.padding`	`PaddingProps` Amount of padding in number of pixels between the edge of the chart and any rendered child components https://formidable.com/open-source/victory/docs/common-props#padding
`tooltip.showTooltips`	`boolean` Should the tooltip be shown on hover?	`true`
`tooltip.labelFormat`	`string[] \| number[] \| ((data: any) => string \| number \| string[] \| number[] \| null) \| undefined` Specify how labels values should be formatted. This is likely to be function that takes a value and returns a formatted string, i.e. `({ datum }) => {}`.