Installation Process

To get started with Victory, you can install it by executing the following command:

npm install victory

Getting Started with VictoryBar

To create a bar chart, we can utilize the VictoryBar component. Here’s how to set it up:

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>

<VictoryBar data={data} x="quarter" y="earnings" />

</VictoryChart>

);

}

In this example, we define an array of objects to represent our chart data, and we assign this to the data property. The x and y props denote which attributes to use for the x and y axes. Additionally, we can use domainPadding to ensure the bars do not overlap the axes.

Customizing Axes with VictoryAxis

We can enhance our axes using 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>

<VictoryAxis dependentAxis tickFormat={(x) => $${x / 1000}k} />

<VictoryBar data={data} x="quarter" y="earnings" />

</VictoryChart>

);

}

The dependentAxis prop allows us to customize the y-axis, and the tickFormat function enables us to define the format of the tick labels.

Creating Stacked Bar Charts

To implement a stacked bar chart, we can use the VictoryStack component. Here’s how to set it up:

import React from "react";

import {

VictoryBar,

VictoryChart,

VictoryAxis,

VictoryStack,

VictoryTheme

} from "victory";

const data2018 = [...]; // Data for 2018

const data2019 = [...]; // Data for 2019

const data2020 = [...]; // Data for 2020

const data2021 = [...]; // Data for 2021

export default function App() {

return (

<VictoryChart>

<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>

);

}

Here, we nest the VictoryBar components within the VictoryStack component to create stacked bars for each year.