Data Visualization in React using Victory (Part 2)

Photo by Luke Chesser on Unsplash

In the last article we discussed about the basic properties needed to implement a Bar Graph using Victory.
This article will be all about customizing the Bar graph and adding animations to it.

Styling Charts

Victory charts come with a default ‘grayscale’ theme so that all components look clean and consistent. Let’s switch it up with the Victory provided ‘material’ theme. We can do that by importing VictoryTheme and adding a theme property to VictoryChart. Themes should always be applied to the outermost wrapper component in a chart.

theme={VictoryTheme.material}

Other properties like borders and colors can also be customized using style property. Default is set to ‘grayscale’ theme.

<VictoryChart domainPadding={40}>
  <VictoryBar
    style={{
    data: {
      fill: ({ datum }) => datum.x === 3 ? "#000000" : "#c43a31",
      stroke: ({ index }) => +index % 2 === 0  ? "#000000" :      "#c43a31",
      fillOpacity: 0.7,
      strokeWidth: 3
    },
    labels: {
      fontSize: 15,
      fill: ({ datum }) => datum.x === 3 ? "#000000" : "#c43a31"
    }
  }}
  data={[
    {x: 1, y: 10},
    {x: 2, y: 40},
    {x: 3, y: 90},
    {x: 4, y: 20}
  ]}
  labels={({ datum }) => datum.x}
/>
</VictoryChart>

Many more properties like ‘barWidth’, ‘alignment’, ‘barRatio’, ‘cornerRadius’ can also be altered.

Scales

VictoryBar uses standard scale property. Options for scale include ‘linear’, ‘time’, ‘log’, ‘sqrt’, and the D3-scale functions that correspond to these options. The default scale is set to linear.

Animation

VictoryAnimation is able to animate changes in properties using D3-interpolate. Victory components define their animations via the animate property.

Duration, delay, easing and onEnd functions may all be specified via the animate property.

Stacked Bar Graphs

VictoryStack can be used to stack multiple bar graphs on each other in a single chart.

<VictoryChart
  domainPadding={20}
  theme={VictoryTheme.material}>
  <VictoryAxis
    tickValues={[1, 2, 3, 4]}
    tickFormat={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}/>
  <VictoryAxis
    dependentAxis
    tickFormat={(x) => (`$${x / 1000}k`)}/>
  <VictoryStack>
    <VictoryBar
      data={DATA1}/>
    <VictoryBar
      data={DATA2}/>
    <VictoryBar
      data={DATA3}/>
    <VictoryBar
      data={DATA4}/>
  </VictoryStack>
</VictoryChart>

It is to be noted that the naming of X and Y axes in all the 4 data should be the same.

Conclusion

The above discussed are just a few properties for customizing and making your own Victory Chart.

Victory offers not just bar graphs but also pie Charts, polar graphs, scatter charts, line charts etc.

You can also club multiple types of graphs in a single chart to make your visualized data more interesting and readable.

For a further description of properties and charts, refer to Victory | Getting Started