Category: React

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.

Gradient Background for Polar Charts

We can add gradients for polar charts with the radialGradient component/

For instance, we can write:

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

export default function App() {
  return (
    <div>
      <svg>
        <defs>
          <radialGradient id="radial_gradient">
            <stop offset="10%" stopColor="red" />
            <stop offset="95%" stopColor="gold" />
          </radialGradient>
        </defs>
      </svg>
      ​
      <VictoryChart
        polar
        style={{
          background: { fill: "url(#radial_gradient)" }
        }}
      >
        <VictoryScatter />
        <VictoryPolarAxis
          style={{
            tickLabels: { angle: 0 }
          }}
          tickValues={[0, 90, 180, 270]}
        />
      </VictoryChart>
    </div>
  );
}

We add the stop component with the offset prop to set the amount of the color to see in the gradient.

The VictoryPolarAxis component lets us add the axis for the chart.

The VictoryChart component has the polar prop to add a polar chart/

Charts with Images

We can add charts with background images by setting the backgroundComponent prop of VictoryChart .

For instance, we can write:

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

const CustomBackground = (props) => {
  return <image href={"https://picsum.photos/id/906/525/300.jpg"} {...props} />;
};

const Matterhorn = (props) => {
  return (
    <VictoryChart
      domain={{ y: [2000, 5000] }}
      style={{ background: { opacity: 0.8 } }}
      backgroundComponent={<CustomBackground />}
    >
      <VictoryLine
        data={[
          { x: 0, y: 2500 },
          { x: 1.25, y: 2600 },
          { x: 1.8, y: 3000 },
          { x: 2.7, y: 3300 },
          { x: 3.1, y: 3800 },
          { x: 3.25, y: 4000 },
          { x: 3.5, y: 4000 },
          { x: 4, y: 4478, label: "4,478m" },
          { x: 4.5, y: 4300 },
          { x: 5.1, y: 4200 },
          { x: 6.3, y: 3500 },
          { x: 6.75, y: 3400 },
          { x: 7, y: 3300 },
          { x: 7.25, y: 3200 },
          { x: 9, y: 2900 },
          { x: 12, y: 2000 }
        ]}
        style={{
          data: { strokeWidth: 4 }
        }}
      />
      <VictoryAxis dependentAxis />
    </VictoryChart>
  );
};

export default function App() {
  return <Matterhorn />;
}

We add the CustomBackground component and set that as the value of the backgroundComponent to display the image as the background image.

Animations

We can add animations to our Victory charts with the animate prop.

For instance, we can write:

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

const random = (min, max) => Math.floor(min + Math.random() * max);

const getScatterData = () => {
  const colors = [
    "violet",
    "cornflowerblue",
    "gold",
    "orange",
    "turquoise",
    "tomato",
    "greenyellow"
  ];
  const symbols = [
    "circle",
    "star",
    "square",
    "triangleUp",
    "triangleDown",
    "diamond",
    "plus"
  ];
  return Array(25)
    .fill()
    .map((index) => {
      const scaledIndex = Math.floor(index % 7);
      return {
        x: random(10, 50),
        y: random(2, 100),
        size: random(8) + 3,
        symbol: symbols[scaledIndex],
        fill: colors[random(0, 6)],
        opacity: 0.6
      };
    });
};

export default function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    const timer = setInterval(() => {
      setData(getScatterData());
    }, 3000);
    return () => clearInterval(timer);
  }, []);

  return (
    <VictoryChart animate={{ duration: 2000, easing: "bounce" }}>
      <VictoryScatter
        data={data}
        style={{
          data: {
            fill: ({ datum }) => datum.fill,
            opacity: ({ datum }) => datum.opacity
          }
        }}
      />
    </VictoryChart>
  );
}

to set the animate prop to set the duration and easing of the animation.

Whenever we change the data state, the chart will re-render with the new data values.

getScatterData just returns an array of values for the scatterplot.

Conclusion

We can add gradients for the polar chart and animations to charts in our React app with Victory.

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.

Histogram

We can add a histogram into our React app with Victory’s VictoryHistogram component.

For instance, we can write:

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

const data = [
  { x: 0 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 2 },
  { x: 2 },
  { x: 3 },
  { x: 4 },
  { x: 7 },
  { x: 7 },
  { x: 10 }
];

export default function App() {
  return (
    <VictoryChart>
      <VictoryHistogram
        style={{ data: { fill: "#F1737F" } }}
        cornerRadius={3}
        data={data}
      />
    </VictoryChart>
  );
}

to add the VictoryHistogram component to add the histogram.

The cornerRadius lets us set the corner radius.

And we set the bar’s fill color with the data.fill property.

We can change the bins with the bins prop:

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

const data = [
  { x: 0 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 2 },
  { x: 2 },
  { x: 3 },
  { x: 4 },
  { x: 7 },
  { x: 7 },
  { x: 10 }
];

export default function App() {
  return (
    <VictoryChart>
      <VictoryHistogram
        style={{ data: { fill: "#F1737F" } }}
        cornerRadius={3}
        bins={[0, 2, 8, 15]}
        data={data}
      />
    </VictoryChart>
  );
}

And we can stack histograms with the VictoryStack component:

import React from "react";
import { VictoryChart, VictoryHistogram, VictoryStack } from "victory";

const data1 = [
  { x: 0 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 2 },
  { x: 2 },
  { x: 3 },
  { x: 4 },
  { x: 7 },
  { x: 7 },
  { x: 10 }
];

const data2 = [
  { x: 0 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 2 },
  { x: 2 },
  { x: 3 },
  { x: 4 },
  { x: 5 },
  { x: 7 },
  { x: 8 }
];

export default function App() {
  return (
    <VictoryChart>
      <VictoryStack colorScale="qualitative">
        <VictoryHistogram data={data1} />
        <VictoryHistogram cornerRadius={3} data={data2} />
      </VictoryStack>
    </VictoryChart>
  );
}

We just put the VictoryHistogram s in the VictoryStack component.

Scatterplots

We can create scatterplots with the VictoryScatter component.

For instance, we can write:

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

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

export default function App() {
  return (
    <VictoryChart
      style={{
        background: { fill: "lavender" }
      }}
    >
      <VictoryScatter data={data} />
    </VictoryChart>
  );
}

We can set the background of the scatterplot with the background.fill property.

And we add the scatterplot with the VictoryScatter property.

Conclusion

We can add a histogram and scatterplot into our React app with Victory.

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.

Multiple Bar Labels

We can add multiple bar labels with an array of text.

For instance, we can write:

import React from "react";
import { Bar, VictoryBar, VictoryChart, VictoryLabel } from "victory";

const data = [
  { x: 1, y: 3, label: ["first", "label"] },
  { x: 2, y: 4, label: ["second", "label"] },
  { x: 3, y: 2, label: ["third", "final", "label"] }
];

export default function App() {
  return (
    <VictoryChart domainPadding={{ x: 40, y: 40 }}>
      <VictoryBar
        style={{ data: { fill: "#c43a31" } }}
        data={data}
        labels={({ datum }) => `y: ${datum.y}`}
        labelComponent={
          <VictoryLabel
            backgroundStyle={[{ fill: "orange" }, { fill: "gold" }]}
            backgroundPadding={{ left: 5, right: 5 }}
          />
        }
        dataComponent={
          <Bar tabIndex={0} ariaLabel={({ datum }) => `x: ${datum.x}`} />
        }
      />
    </VictoryChart>
  );
}

We have the label property in the data array.

And we add an array of styles into the backgroundStyle prop.

Polar Chart with Labels

We can add a polar chart with labels with the VictoryBar ‘s polar prop.

For instance, we can write:

import React from "react";
import { VictoryBar, VictoryLabel, VictoryTooltip } from "victory";

const data = [
  { x: 1, y: 3, label: ["first", "label"] },
  { x: 2, y: 4, label: ["second", "label"] },
  { x: 3, y: 2, label: ["third", "final", "label"] }
];

export default function App() {
  return (
    <VictoryBar
      polar
      data={data}
      style={{ data: { width: 40, fill: "tomato" } }}
      labelComponent={
        <VictoryTooltip
          active
          labelPlacement="perpendicular"
          pointerLength={30}
          pointerWidth={0}
          flyoutPadding={0}
          labelComponent={
            <VictoryLabel
              verticalAnchor="end"
              dy={8}
              backgroundStyle={{ fill: "white" }}
              backgroundPadding={8}
            />
          }
        />
      }
    />
  );
}

Our 1abelComponent prop has the VictoryTooltip component.

We set the labelPlacement to perpendicular to place the label to be flush with the polar segments.

We also set the pointerLength , pointerWidth to set the length and width of the label.

VictoryLabel has the label text.

Pie Chart with Labels

We can add pie charts with labels with the VictoryPie and VictoryTooltip components.

For instance, we can write:

import React from "react";
import { VictoryPie, VictoryTooltip } from "victory";

const data = [
  { x: 1, y: 3, placement: "vertical" },
  { x: 2, y: 4, placement: "parallel" },
  { x: 3, y: 2, placement: "perpendicular" }
];

export default function App() {
  return (
    <VictoryPie
      colorScale="warm"
      radius={120}
      style={{ labels: { padding: 5, fontSize: 15 } }}
      data={data}
      labels={({ datum }) => `${datum.placement}nlabel`}
      labelPlacement={({ datum }) => datum.placement}
      labelPosition="startAngle"
      labelComponent={<VictoryTooltip active />}
    />
  );
}

We set the label placement with the labelPlacement prop.

It gets the placement property value and returns it.

We render the label with th labelComponent .

And we place the labels flush to the pie segments with the labelPosition prop.

Conclusion

We can add multiple bar labels and other custom label options in our React app with Victory.

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.

Change Bar Colors

We can change the colors of the bars with the VictoryStack component’s colorScale prop.

For instance, we can write:

import React from "react";
import {
  VictoryBar,
  VictoryChart,
  VictoryAxis,
  VictoryStack,
  VictoryTheme
} from "victory";

const data2018 = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 }
];

const data2019 = [
  { quarter: 1, earnings: 15000 },
  { quarter: 2, earnings: 12500 },
  { quarter: 3, earnings: 19500 },
  { quarter: 4, earnings: 13000 }
];

const data2020 = [
  { quarter: 1, earnings: 11500 },
  { quarter: 2, earnings: 13250 },
  { quarter: 3, earnings: 20000 },
  { quarter: 4, earnings: 15500 }
];

const data2021 = [
  { quarter: 1, earnings: 18000 },
  { quarter: 2, earnings: 13250 },
  { quarter: 3, earnings: 15000 },
  { quarter: 4, earnings: 12000 }
];

export default function App() {
  return (
    <VictoryChart domainPadding={20}>
      <VictoryAxis
        tickValues={[1, 2, 3, 4]}
        tickFormat={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
      />
      <VictoryAxis dependentAxis tickFormat={(x) => `$${x / 1000}k`} />
      <VictoryStack colorScale="warm">
        <VictoryBar data={data2018} x="quarter" y="earnings" />
        <VictoryBar data={data2019} x="quarter" y="earnings" />
        <VictoryBar data={data2020} x="quarter" y="earnings" />
        <VictoryBar data={data2021} x="quarter" y="earnings" />
      </VictoryStack>
    </VictoryChart>
  );
}

Add Bar Labels

For instance, we can write:

import React from "react";
import { Bar, VictoryBar, VictoryChart, VictoryTooltip } from "victory";

const data = [
  { x: 1, y: 13000 },
  { x: 2, y: 16500 },
  { x: 3, y: 14250 },
  { x: 4, y: 19000 }
];

export default function App() {
  return (
    <VictoryChart domainPadding={{ x: 40, y: 40 }}>
      <VictoryBar
        style={{ data: { fill: "#c43a31" } }}
        data={data}
        labels={({ datum }) => `y: ${datum.y}`}
        labelComponent={<VictoryTooltip />}
        dataComponent={
          <Bar tabIndex={0} ariaLabel={({ datum }) => `x: ${datum.x}`} />
        }
      />
    </VictoryChart>
  );
}

We render the bar chart by setting the labels prop to get the data from the datum property.

We do the same with tyhe x-axis by setting the arialLabel prop.

And we set the labelComponent prop to add a tooltip for the bar when we hover over it to show its value.

Backgrounds for Labels

We can add styled bar labels by using the VictoryLabel component.

For instance, we can write:

import React from "react";
import { Bar, VictoryBar, VictoryChart, VictoryLabel } from "victory";

const data = [
  { x: 1, y: 13000, label: "first label" },
  { x: 2, y: 16500, label: "second label" },
  { x: 3, y: 14250, label: "3rd label" },
  { x: 4, y: 19000, label: "4th label" }
];

export default function App() {
  return (
    <VictoryChart domainPadding={{ x: 40, y: 40 }}>
      <VictoryBar
        style={{ data: { fill: "#c43a31" } }}
        data={data}
        labels={({ datum }) => `y: ${datum.y}`}
        labelComponent={
          <VictoryLabel
            dy={-20}
            backgroundStyle={{ fill: "tomato", opacity: 0.6 }}
            backgroundPadding={{ bottom: 5, top: 5, left: 10, right: 10 }}
          />
        }
        dataComponent={
          <Bar tabIndex={0} ariaLabel={({ datum }) => `x: ${datum.x}`} />
        }
      />
    </VictoryChart>
  );
}

to add the VictoryLabel component to set the backgroundStyle and backgroundPadding props with the styles we want.

The label property will be automatically displayed as the label text.

Conclusion

We can customize bar charts with labels and colors in our React app with Victory.

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.

Installation

We can install Victory by running:

npm install victory

Getting Started

We can create a bar chart with the VictoryBar component.

To do this, we write:

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

const data = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 }
];

export default function App() {
  return (
    <VictoryChart domainPadding={20}>
      <VictoryBar data={data} x="quarter" y="earnings" />
    </VictoryChart>
  );
}

to add a bar chart.

We have an array of objects as our chart data.

And we pass that as the value of the data prop.

Then we set the property names for the x and y-axis values with the x and y props respectively.

We set the domainPadding to shift the bars so that they don’t overlap with the axes.

We can customize the axis with the VictoryAxis component:

import React from "react";
import { VictoryBar, VictoryChart, VictoryAxis } from "victory";

const data = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 }
];

export default function App() {
  return (
    <VictoryChart domainPadding={20}>
      <VictoryAxis
        tickValues={[1, 2, 3, 4]}
        tickFormat={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
      />
      <VictoryAxis dependentAxis tickFormat={(x) => `$${x / 1000}k`} />
      <VictoryBar data={data} x="quarter" y="earnings" />
    </VictoryChart>
  );
}

The dependentAxis prop lets us modify the y-axis.

tickFormat has a function that returns the content we want to display on the axis ticks.

We can also pass in an array of values to display on the axis.

Stacked Bar Charts

We can add a stacked bar chart with the VictoryStack component.

To do this, we write:

import React from "react";
import {
  VictoryBar,
  VictoryChart,
  VictoryAxis,
  VictoryStack,
  VictoryTheme
} from "victory";

const data2018 = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 }
];

const data2019 = [
  { quarter: 1, earnings: 15000 },
  { quarter: 2, earnings: 12500 },
  { quarter: 3, earnings: 19500 },
  { quarter: 4, earnings: 13000 }
];

const data2020 = [
  { quarter: 1, earnings: 11500 },
  { quarter: 2, earnings: 13250 },
  { quarter: 3, earnings: 20000 },
  { quarter: 4, earnings: 15500 }
];

const data2021 = [
  { quarter: 1, earnings: 18000 },
  { quarter: 2, earnings: 13250 },
  { quarter: 3, earnings: 15000 },
  { quarter: 4, earnings: 12000 }
];

export default function App() {
  return (
    <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={data2018} x="quarter" y="earnings" />
        <VictoryBar data={data2019} x="quarter" y="earnings" />
        <VictoryBar data={data2020} x="quarter" y="earnings" />
        <VictoryBar data={data2021} x="quarter" y="earnings" />
      </VictoryStack>
    </VictoryChart>
  );
}

We just nest the VictoryBar in the VictoryStack component.

Conclusion

We can add bar charts easily into our React app with the Victory library.