Creating Stunning 3D Charts With Highcharts And React.

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 React to build impressive 3D bar and pie charts.

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:

1. 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. HighchartsReact is a wrapper for integrating Highcharts with React, and highcharts3d is an additional module for enabling 3D chart functionality.

2. Enabling 3D Features:

   highcharts3d(Highcharts);
   

   This line enables the 3D features provided by the highcharts3d module for all subsequent instances of Highcharts charts.

3. Chart Options Configuration:

   The barChartOptions 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.

4. Rendering Data:

   series: [{
       data: [1318, 1073, 1060, 813, 775],
       colorByPoint: true
   }]
   

   The series property in barChartOptions 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.

5. Rendering the Chart Component:

   return (
       <div>
           <HighchartsReact highcharts={Highcharts} options={barChartOptions} />
       </div>
   );
   

   Finally, the component returns a div containing the HighchartsReact component. This is where the integration between React and Highcharts happens. The options prop is set to barChartOptions, defining how the chart should be configured and what data it should display.

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:

1. Chart Type and 3D Configuration:

   chart: {
       type: 'pie',
       options3d: {
           enabled: true,
           alpha: 45,
           beta: 0
       }
   },
   

   In the PieChart, the chart configuration specifies a type of 'pie' to create a pie chart. Additionally, it includes 3D configuration options like alpha and beta for controlling the angles of the chart.

2. Plot Options for Pie Chart:

   plotOptions: {
       pie: {
           allowPointSelect: true,
           cursor: 'pointer',
           depth: 35,
           dataLabels: {
               enabled: true,
               format: '{point.name}'
           }
       }
   },
   

   The plotOptions 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.

3. Data for Pie Chart:

   series: [{
       type: 'pie',
       name: 'Share',
       data: [
           ['Groceries', 23],
           ['Transportation', 18],
           ['Utilities', 9],
           ['Entertainment', 8],
       ]
   }]
   

   The series 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 type is set to 'pie', and the name is 'Share'.

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 BarChart swung through book genres, while the PieChart danced through monthly expenses, both bringing data to life with 3D charm.

Now, where can these visual delights shine? Imagine using the BarChart for showcasing sales by product category or the PieChart 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!

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 GitHub. Happy charting!