Skip to main content

Themes & Styling

Themes

Try out the Victory themes and make your own. Check out the VictoryTheme API documentation more details on themes.

Live View
Loading...
Live Editor

Styles

How can I change the colors of lines and other elements in Victory?

Most components in Victory use a standard style prop with style namespaces for "data" and "labels". Any styles added to the "data" namespace will be applied to all the svg elements rendered for a given dataset.

Live View
Loading...
Live Editor

How can I change the color of an individual point or bar?

Individual elements in Victory can be styled by adding style attributes directly to your data object and using functional styles and props as in the example below. Functions are called with all the props that correspond to the element they render.

Live View
Loading...
Live Editor

Note that continuous data types such as VictoryLine and VictoryArea cannot be styled in this way, as they only render a single element for a given dataset.

Gradient Fills

Create a gradient def as usual and then reference it by id in your style object. Gradients can be used to give continuous charts (i.e. line or area charts) the appearance of discrete data elements and hover states.

Live View
Loading...
Live Editor