Add Charts into Our React App with Victory — Custom Chart Components

The Victory lets us add charts and data visualization into our React app.

In this article, we’ll look at how to add charts into our React app with Victory.

Polygon Charts

We can add polygon charts with the Polygon component.

For instance, we can write:

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

const data = [
  { x: 2, y: 1 },
  { x: 3, y: 5 },
  { x: 6, y: 3 }
];

const Polygon = (props) => {
  const getPoints = (data, scale) => {
    return data.reduce(
      (pointStr, { x, y }) => `${pointStr} ${scale.x(x)},${scale.y(y)}`,
      ""
    );
  };

  const { data, style, scale } = props;
  const points = getPoints(data, scale);
  return <polygon points={points} style={style} />;
};

export default function App() {
  return (
    <VictoryChart height={400} width={400} domain={[-10, 10]}>
      <Polygon data={data} style={{ fill: "tomato", opacity: 0.5 }} />
      <VictoryScatter data={data} />
    </VictoryChart>
  );
}

We create the getPoint function in the Polygon component to create the point string for the polygon path.

Then we pass that into the polygon element to create the points.

In App , we pass in the Polygon component with the data prop to create the polygon from the given corner points.

We render the same points as dots with the VictoryScatter component.

Using Victory Components to Create Custom Components

We can use Victory components to create custom components.

For instance, we can write:

import React from "react";
import {
  VictoryAxis,
  VictoryChart,
  VictoryGroup,
  VictoryLine,
  VictoryPie,
  VictoryScatter
} from "victory";

const data = [
  { x: 2, y: 1 },
  { x: 3, y: 5 },
  { x: 6, y: 3 }
];

const CustomPie = (props) => {
  const { datum, x, y } = props;
  const pieWidth = 120;

  return (
    <g transform={`translate(${x - pieWidth / 2}, ${y - pieWidth / 2})`}>
      <VictoryPie
        standalone={false}
        height={pieWidth}
        width={pieWidth}
        data={datum.pie}
        style={{ labels: { fontSize: 0 } }}
        colorScale={["#f77", "#55e", "#8af"]}
      />
    </g>
  );
};

export default function App() {
  return (
    <VictoryChart domain={{ y: [0, 100] }}>
      <VictoryAxis />
      <VictoryGroup data={data}>
        <VictoryLine />
        <VictoryScatter dataComponent={<CustomPie />} />
      </VictoryGroup>
    </VictoryChart>
  );
}

We create the CustomPie component that renders small pie charts with the VictoryPie component to render pie charts as points.

The in App , we render VictoryGroup to render the data by setting it as the data prop.

VictoryScatter lets us render the points.

And we set CustomPie as the dataComponent prop to render the pies as points.

We can pass in any SVG component as point components in the dataComponent prop.

For instance, we can use styled-components to create the SVG circles for the points:

import React from "react";
import styled from "styled-components";
import { VictoryChart, VictoryLine, VictoryScatter } from "victory";

const data = [
  { x: 2, y: 1 },
  { x: 3, y: 5 },
  { x: 6, y: 3 }
];

const StyledPoint = styled.circle`
  fill: ${(props) => props.color};
`;

const colors = ["#A8E6CE", "#DCEDC2", "#FFD3B5", "#FFAAA6", "#FF8C94"];

const ScatterPoint = ({ x, y, datum, min, max }) => {
  const i = React.useMemo(() => {
    return Math.floor(((datum.y - min) / (max - min)) * (colors.length - 1));
  }, [datum, min, max]);

return <StyledPoint color={colors[i]} cx={x} cy={y} r={6} />;
};

export default function App() {
  const temperatures = data.map(({ y }) => y);
  const min = Math.min(...temperatures);
  const max = Math.max(...temperatures);

  return (
    <VictoryChart>
      <VictoryLine data={data} />
      <VictoryScatter
        data={data}
        dataComponent={<ScatterPoint min={min} max={max} />}
      />
    </VictoryChart>
  );
}

The StyledPoint component has the points.

And ScatterPoint renders the StyledPoint with the fill color for the point.

Then we pass the ScatterPoint as the value of dataComponent to render the points.

Conclusion

We can render polygon charts and create custom components for charts with React Victory.