Section 1.1: Setting Up the Environment

To get started, we need to install the @nivo/bar package. This can be accomplished by executing the following command in your terminal:

npm install @nivo/bar

Once the package is installed, we can create a bar chart by utilizing the following code:

import React from "react";

import { ResponsiveBar } from "@nivo/bar";

const data = [

{

country: "AD",

"hot dog": 81,

"hot dogColor": "hsl(154, 70%, 50%)",

burger: 193,

burgerColor: "hsl(304, 70%, 50%)",

sandwich: 50,

sandwichColor: "hsl(222, 70%, 50%)",

kebab: 154,

kebabColor: "hsl(241, 70%, 50%)",

fries: 68,

friesColor: "hsl(331, 70%, 50%)",

donut: 49,

donutColor: "hsl(259, 70%, 50%)",

},

// Additional data entries...

];

const MyResponsiveBar = ({ data }) => (

<ResponsiveBar

data={data}

keys={['hot dog', 'burger', 'sandwich', 'kebab', 'fries', 'donut']}

margin={{ top: 20, right: 30, bottom: 50, left: 60 }}

// Additional properties...

/>

);

export default function App() {

return <MyResponsiveBar data={data} />;

}

The data object contains an array of entries, where each entry holds the relevant values and color codes for the respective bar segments.

Section 1.2: Customizing the Bar Chart

To further enhance our bar chart, we can customize various properties:

1. Keys: These define the segments of each bar.
2. Margins: Adjust the spacing around the chart.
3. Value Scale: By using a linear scale, we can represent values without any transformation.
4. Fill Patterns: You can define unique patterns for each bar segment.
5. Axis Configuration: Customize both the x-axis and y-axis settings, including tick sizes and labels.
6. Legends: Position and style the legend items according to your preferences.
7. Animation Effects: Enable animations with specified stiffness and damping properties for a smoother user experience.