Data visualization is a crucial aspect of conveying complex information in an easily understandable manner. In the world of web development, Highcharts stands out as a powerful library for creating interactive and visually appealing charts. In this tutorial, we'll explore how to integrate Highcharts with to build impressive 3D bar and pie charts. React Setting up the Project: To get started, make sure you have a React project set up. If not, you can create one using the Create React App or your preferred method. Once your project is ready, install the required dependencies: npm install highcharts highcharts-react-official For demo purposes, let’s create two charts: pie and bar charts. Let’s keep them in separate files and then import them to the app's main file.  Now, let's dive into the code and start with a bar chart. Bar chart: import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import highcharts3d from 'highcharts/highcharts-3d'

highcharts3d(Highcharts)

export const BarChart = () => {
    const barChartOptions = {
        chart: {
            renderTo: 'container',
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        xAxis: {
            categories: ['Mystery', 'Science Fiction', 'Romance', 'Fantasy', 'Biography']
        },
        yAxis: {
            title: {
                enabled: false
            }
        },
        title: {
            text: 'Book Sales by Genre',
            align: 'left'
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [1318, 1073, 1060, 813, 775],
            colorByPoint: true
        }]
    };

    return (
        <div>
            <HighchartsReact highcharts={Highcharts} options={barChartOptions} />
        </div>
    );
}; Let's break down the code step by step: Importing Libraries: import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import highcharts3d from 'highcharts/highcharts-3d'; Here, we import the necessary Highcharts libraries. is a wrapper for integrating Highcharts with React, and is an additional module for enabling 3D chart functionality. HighchartsReact highcharts3d Enabling 3D Features: highcharts3d(Highcharts); This line enables the 3D features provided by the module for all subsequent instances of Highcharts charts. highcharts3d Chart Options Configuration: The object contains various configuration options for the 3D column chart. These options include specifying the chart type as 'column', enabling 3D features with specific parameters (alpha, beta, depth, viewDistance), and configuring other aspects like xAxis, yAxis, title, legend, and plotOptions. barChartOptions Rendering Data: series: [{
    data: [1318, 1073, 1060, 813, 775],
    colorByPoint: true
}] The property in defines the data to be displayed on the chart. In this case, it's a column chart with a single series, and each data point represents the book sales for a specific genre. series barChartOptions Rendering the Chart Component: return (
    <div>
        <HighchartsReact highcharts={Highcharts} options={barChartOptions} />
    </div>
); Finally, the component returns a containing the component. This is where the integration between React and Highcharts happens. The prop is set to , defining how the chart should be configured and what data it should display. div HighchartsReact options barChartOptions Let’s take a look at the pie chart. import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import highcharts3d from 'highcharts/highcharts-3d'

highcharts3d(Highcharts)

export const PieChart = () => {
    const pieChartOptions = {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: 'Monthly expenses',
            align: 'left'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Share',
            data: [
                ['Groceries', 23],
                ['Transportation', 18],
                ['Utilities*', 9],
                ['Entertainment', 8],
            ]
        }]
    };

    return (
        <div>
            <HighchartsReact highcharts={Highcharts} options={pieChartOptions} />
        </div>
    );
}; Code description: Chart Type and 3D Configuration: chart: {
    type: 'pie',
    options3d: {
        enabled: true,
        alpha: 45,
        beta: 0
    }
}, In the , the configuration specifies a type of 'pie' to create a pie chart. Additionally, it includes 3D configuration options like and for controlling the angles of the chart. PieChart chart alpha beta Plot Options for Pie Chart: plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        depth: 35,
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }
}, The object is configured for a pie chart. It enables point selection, sets the cursor type, specifies the depth of the chart, and enables data labels with a specific format. plotOptions Data for Pie Chart: series: [{
    type: 'pie',
    name: 'Share',
    data: [
        ['Groceries', 23],
        ['Transportation', 18],
        ['Utilities', 9],
        ['Entertainment', 8],
    ]
}] The property defines the data for the pie chart. It consists of an array of arrays, where each inner array represents a data point with a name and a value. The is set to 'pie', and the is 'Share'. series type name This is how it looks in the browser: Barchart Piechart And there you have it – the fusion of Highcharts and React, turning mundane data into vibrant 3D charts! The swung through book genres, while the danced through monthly expenses, both bringing data to life with 3D charm. BarChart PieChart Now, where can these visual delights shine? Imagine using the for showcasing sales by product category or the to break down user engagement on your website. In web applications, these charts are not just data; they're interactive stories that engage users and make your application pop! BarChart PieChart So, dive into the docs, play with configurations, and let your charts tell dynamic tales in your web applications. The code mentioned above can be found in my . Happy charting! GitHub

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Canvas And React: A Simple Guide To Data Charts

Heatmap Visualization With Deck.gl 

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Too Long; Didn't Read

Make resilience your competitive advantage

Creating Stunning 3D Charts With Highcharts And React.

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

3 Things You Will Love About Micro Frontends

Canvas And React: A Simple Guide To Data Charts

Creating a Grouped Bar Graph using Jetpack Compose

How to Make Beautiful, Easy-to-read Charts with React Native Gifted Charts

Four Types of Array Data-Based Bar Charts in Python

3 Things You Will Love About Micro Frontends

Canvas And React: A Simple Guide To Data Charts

Creating a Grouped Bar Graph using Jetpack Compose

How to Make Beautiful, Easy-to-read Charts with React Native Gifted Charts

Four Types of Array Data-Based Bar Charts in Python

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps