High Charts Implementation in React: Pie and Bar Charts

Highcharts is a powerful charting library that allows developers to add interactive and customizable charts to web applications. This article demonstrates how to implement Highcharts in a React application, focusing on creating Pie Charts and Bar Charts.

Prerequisites

To follow along, ensure you have the following:

Node.js and npm/yarn installed on your system.
Basic knowledge of React.

Setting Up the Project

First, create a new React project using create-react-app or your preferred setup.

npx create-react-app highcharts-example
cd highcharts-example

Install Highcharts and the official React wrapper for Highcharts:

npm install highcharts react-highcharts

Adding a Pie Chart

Step 1: Basic Configuration

Create a new component named PieChart.js:

touch src/components/PieChart.js

Edit the file and set up the pie chart:

import React from "react";
import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts";

const PieChart = () => {
    const options = {
        chart: {
            type: "pie"
        },
        title: {
            text: "Browser Market Share"
        },
        series: [
            {
                name: "Share",
                data: [
                    { name: "Chrome", y: 63.59 },
                    { name: "Safari", y: 19.2 },
                    { name: "Firefox", y: 4.2 },
                    { name: "Edge", y: 3.4 },
                    { name: "Other", y: 9.61 }
                ]
            }
        ]
    };

    return <HighchartsReact highcharts={Highcharts} options={options} />;
};

export default PieChart;

Step 2: Rendering the Component
Update App.js to include the PieChart component:

import React from "react";
import PieChart from "./components/PieChart";

function App() {
    return (
        <div>
            <h1>Highcharts in React</h1>
            <PieChart />
        </div>
    );
}

export default App;

Run the application:

npm start

You should see an interactive pie chart displaying browser market shares.

Adding a Bar Chart

Step 1: Basic Configuration
Create another component named BarChart.js:

touch src/components/BarChart.js

Edit the file and set up the bar chart:

import React from "react";
import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts";

const BarChart = () => {
    const options = {
        chart: {
            type: "bar"
        },
        title: {
            text: "Monthly Sales Data"
        },
        xAxis: {
            categories: ["January", "February", "March", "April", "May"]
        },
        yAxis: {
            title: {
                text: "Sales (in USD)"
            }
        },
        series: [
            {
                name: "Sales",
                data: [5000, 7000, 8000, 6000, 9000]
            }
        ]
    };

    return <HighchartsReact highcharts={Highcharts} options={options} />;
};

export default BarChart;

Step 2: Rendering the Component
Update App.js to include the BarChart component:

import React from "react";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";

function App() {
    return (
        <div>
            <h1>Highcharts in React</h1>
            <PieChart />
            <BarChart />
        </div>
    );
}

export default App;

Styling and Customization

Highcharts is highly customizable. You can:

Change Colors: Modify the colors array in the options object.
Add Tooltips: Customize tooltips with the tooltip property.
Customize Legends: Adjust legends using the legend property.

For example, adding a custom tooltip in the bar chart:

tooltip: {
    formatter: function () {
        return `<b>${this.x}</b>: $${this.y}`;
    }
}

Conclusion

Highcharts makes it straightforward to create beautiful, interactive charts in React. This article demonstrated how to implement Pie Charts and Bar Charts, which are just a starting point. Explore the vast customization options Highcharts offers to tailor charts to your application's needs.

Happy coding!

Follow Me for more interested Article

Visit my blogs website

Support me on Patreon

I would love to see you in my followers list.