VictoryTheme
Allows you to create a consistent look across all of your chart elements, either by using one of the included themes or by creating your own. By default, Victory components use the grayscale
theme.
Victory includes several prebuilt themes that can be used.
For more information about themes and styles, see the themes guide.
Types
This is roughly what the VictoryTheme
object looks like, see the source code for the full definition.
The dependentAxis
and independentAxis
, polarDependentAxis
, and polarIndependentAxis
will be merged with any props and styles supplied in the axis
namespace.
interface VictoryThemeDefinition {
palette: {...props};
area: {...props}
axis: {...props},
dependentAxis: {...props},
independentAxis: {...props},
polarDependentAxis: {...props},
polarIndependentAxis: {...props},
bar: {...props},
candlestick: {...props},
chart: {...props},
errorbar: {...props},
histogram: {...props},
group: {...props},
legend: {...props},
line: {...props},
pie: {...props},
scatter: {...props},
stack: {...props},
tooltip: {...props},
voronoi: {...props}
}
palette
The palette
property defines a collection of colors that can be used across all chart elements. Each palette contains predefined color arrays that you can use directly or customize as needed.
Properties
Property | Type | Description |
---|---|---|
grayscale | string[] | Shades of gray, ideal for minimalist or monochrome chart designs |
qualitative | string[] | Used for categorical data, containing distinct colors that are easy to differentiate visually |
heatmap | string[] | A gradient-based color scheme often used for heatmaps or data density visualizations |
warm | string[] | Warm colors like reds, oranges, and yellows |
cool | string[] | Cool colors such as blues, purples, and greens |
red | string[] | Various shades of red |
blue | string[] | Various shades of blue |
green | string[] | Various shades of green |
Example
<VictoryChart theme={VictoryTheme.clean} > <VictoryLine data={sampleData} /> </VictoryChart>