Victory
designed to shade in a part of a chart based on data
points. Add one before the vertical axis component.<VictoryArea
style={{ data: {
fill: “var(--warning-background-color)”
} }}
/>This component also needs a data prop as a set of x
and y values. As we want to colour any area between
the first and last point, we can set x to the first and
last timestamp. The y0 and y values define where on
the vertical axis we want the colour to start and stop
respectively.data={[
{ x: data[0].timestamp, y0: 3, y: 5 },
{ x: data.slice(-1)[0].timestamp, y0: 3, y: 5 }
]}With that, our final chart is complete. Click around
the different endpoints and see how the charts
update when supplied with new data.
Victory has components for many types of charts
such as box and scatter plots. Visit https://netm.
ag/3aOxKdd to see what’s possible.Top left Victory charts are
SVG elements that scale.
We can then use the view
box dimensions to keep
everything in proportion
Top right Unless told
otherwise, Victory will
space values evenly for the
best visual appearance.
To override this, use the
tickCount prop
Above The order of
components determine
how they layer on top of
each other. Most often,
VictoryLine components
would come lastotherwise it will adapt to the data it gets supplied
later on.
<VictoryChart domain={{ y: [0, 5] }}>
A separate VictoryLine component draws the chart
values. Like the pie chart it takes data and style props.
This data uses timestamp and length keys instead of x
and y. We can define which keys Victory should use
for these values as props.
<VictoryLine
data={data}
style={{ data: { stroke: “var(--foreground-color)”,
strokeWidth: 4 } }}
x=”timestamp”
y=”length”
/>
The time along the horizontal axis is supplied as a
Unix timestamp, which needs to be human readable.
The VictoryAxis component lets us define how these
axes should be drawn. For the horizontal axis, we
can use the tickFormat prop to format the label using
moment.js. Add this just above the line we just drew.
<VictoryAxis
tickFormat={tick => format(new Date(tick), “h:mm a”)}
style={{ tickLabels: {...} }}
/>
The vertical axis works in a similar way. The only
requirement is that we tell Victory it is the dependent
axis in order to show it vertically.
<VictoryAxis
dependentAxis={true}
style={{ tickLabels: {...} }}
tickFormat={tick => ${tick}s}
/>
We can add grid lines through another value on the
style object. The grid property will tell Victory to draw
grid lines in a given style. It can take a function and
apply it to every tick value on that axis.
grid: {
stroke: ({ tick }) =>
tick >= 3? “var(--warning-color)” : “var(--foreground-
color)”,
strokeWidth: 1
},
In order to shade in everything after three seconds,
we need one last piece. The VictoryArea component is