Skip to main content

Getting Started with Victory

Victory is an opinionated, but fully overridable, ecosystem of composable React components for building interactive data visualizations. The following tutorial explains how to set up a basic chart.

Live View
Loading...
Live Editor

Tutorial​

In this guide, we’ll show you how to get started with Victory and walk you through the creation and customization of a composed chart.

1. Import Victory​

Add Victory to your project with the command npm install victory, then import it into your component. For now, let's start with a simple Line Chart.

import React from "react";
import {
  VictoryChart,
  VictoryLine,
} from "victory";

2. Start with a basic chart​

Components include sensible defaults, so even without data the chart will render with samples. To add some basic styling, we will use our built in clean theme. When a theme is applied to VictoryChart, it will be inherited by all child components.

Live View
Loading...
Live Editor

3. Add your data​

Let's add some data. Victory cartesian charts look for x and y values in data points, which our data doesn't have. We can work around this by adding accessor props to our VictoryLine component. Our data contains the country name, and an array of values from 2010 to 2022.

type Data = {
  name: string;
  data: number[];
};
Live View
Loading...
Live Editor

4. Customize the X axis​

VictoryChart is a wrapper component that plots all of its children on the same scale. The default axes may not always be what you need, but they can be customized with VictoryAxis components.

We will start by adding a dependent axis to our chart. This axis will be the vertical axis, and we will customize it with a label and tick values.

<VictoryAxis
  dependentAxis
  tickValues={_.range(0, 200, 40)}
  tickFormat={(value) => `${value} GW`}
/>

Our data is an array of values from the year 2010 to 2022, so we will also add a horizontal axis with tick values.

<VictoryAxis
  tickValues={_.range(2010, 2024, 2)}
/>

Finally, we will customize the axis styles to make it more readable. We will adjust the font size of the tick labels and the axis ticks, and add grid lines to the dependent axis.

Live View
Loading...
Live Editor

5. Multiple Series​

Lets expand our data to include multiple countries by iterating over the series array and adding a VictoryLine component for each country. Since we need to identify the unique trend lines, we will also adjust the stroke color of each line.

{
  series.map((s, i) => (
    <VictoryLine
      key={s.name}
      data={s.data.map((d, i) => ({
        x: i + 2010,
        y: d,
      }))}
      style={{
        data: {
          stroke:
            VictoryTheme.clean.palette
              .qualitative[i],
          strokeWidth: 1,
        },
      }}
    />
  ));
}
Live View
Loading...
Live Editor

6. Combining Chart Types​

To make each data point stand out more, we can combine our VictoryLine chart with a VictoryScatter chart. Victory provides a specialized wrapper component VictoryGroup that helps us apply properties to multiple components at once.

{
  series.map((s, i) => (
    <VictoryGroup
      data={s.data.map((d, i) => ({
        x: i + 2010,
        y: d,
      }))}
      key={s.name}
    >
      <VictoryLine
        style={{
          data: {
            stroke:
              VictoryTheme.clean.palette
                .qualitative[i],
            strokeWidth: 1,
          },
        }}
      />
      <VictoryScatter
        size={2}
        symbol={symbols[i]}
        style={{
          data: {
            fill: VictoryTheme.clean
              .palette.qualitative[i],
          },
        }}
      />
    </VictoryGroup>
  ));
}
Live View
Loading...
Live Editor

7. Adding a Legend​

To make it easier to identify each country, we can add a legend to our chart. Victory provides a VictoryLegend component that can be used to display a legend for the chart.

<VictoryLegend
  itemsPerRow={4}
  x={50}
  y={220}
  data={series.map((s, i) => ({
    name: s.name,
    symbol: {
      fill: VictoryTheme.clean.palette
        .qualitative[i],
      type: symbols[i],
    },
  }))}
/>

Since our Legend is going to take up some space in our chart, we also need to adjust the padding to provide enough space for the legend.

<VictoryChart
  padding={{
    top: 50,
    left: 70,
    right: 50,
    bottom: 100,
  }}
/>
Live View
Loading...
Live Editor

8. Adding Labels​

Finally, we can add labels to our chart to provide more context. We will add a title and a source link to our chart as well as axes labels.

<VictoryLabel
  text="Installed Wind Capacity (GW)"
  dx={28}
  dy={18}
/>
Live View
Loading...
Live Editor

Next Steps​

Congratulations! You’ve created your first chart with Victory. Happy charting.

Documentation, Contributing, and Source​

For more information about Victory and its components, check out the docs - see VictoryChart to get started. Interested in helping out or seeing what's happening under the hood? Victory is maintained at github.com/FormidableLabs/victory, and you can start contributing here.