Victory
As well as being directly styled using the style prop, all
Victory charts support mass styling using theme objects.
These are applied via the theme prop and can cover multiple types
of charts in one place.
Victory comes with two themes built in. The default grayscale
theme provides a clean, accessible default, while the material
theme uses brighter colours and draws grid lines along charts
using axes. These can be found in the VictoryTheme object.const myTheme = {
pie: {
...VictoryTheme.material.pie,
innerRadius: 100,
}
};All themes are objects. Any Victory component – such as a pie
chart, legend or label – has a key in this object. If a value has not
been set, it will instead use the grey fallback. This means any
style that gets missed will still be visible but may not match the
appearance of the rest.
A theme is not limited to colours – it can be used as a default
for multiple customisable elements to avoid repeating a common
set of props each time. For example, charts can share a common
width, font family or title position. Because many components
share the same set of styling values, they can be created in one
object and passed to each chart type like normal.
While themes can help style multiple components at once, inline
styles are still useful when it comes to conditional styling. Themes
can be used to provide the base style, with functions then being
used to override it.MASS STYLING WITH
THEME OBJECTS
IN-DEPTH“Every part of a chart is
customisable. In this case,
we want an animated
chart that is hollow
inside with no label and
less spacing”
are supplied to it. Each one is exported from the
“victory” package we installed from NPM. Our first
one – VictoryPie – will draw a simple monochrome pie
chart along with some sample data. Add one to our
Uptime component.
const Uptime = () => { return (
)};
The pie chart is a comparison between uptime and
downtime. Given the percentage of uptime is a value
between 0 and 1, we can calculate the downtime by
seeing what’s left over.
All Victory components take their data in a similar
manner. The data prop expects an array of objects
with an x and a y value. For a pie chart, the x is the
label and the y is the value.
data={[
{ x: “uptime”, y: percentage },
{ x: “downtime”, y: 1 - percentage }
]}
Every part of a chart is customisable. In this case,
we want an animated chart that is hollow inside
with no label and less spacing. These are all props
we can customise. Some of them, such as label, can
take a function and apply it against everything that
matches. In this case, we are telling Victory not to
render any labels.
animate={{ duration: 200 }}
innerRadius={150}
labels={() => null}
padding={0}
Other customisations, such as colours, can be
applied using the style prop. This is a large object
keyed to specific parts of the chart. To style the