Using Highcharts in Typescript

What is Highcharts?

Highcharts is a standalone library. It does not require any additional frameworks or plugins. It is a front-end technology and can be used with any server technology that can run static files. It runs entirely on client-side

There are multiple ways to install and use Highcharts but In this article, I will cover installing Highcharts using NPM and then using it in typescript.

Installing Highcharts

npm install highcharts --save

If you want to use Highcharts inside your project, you can define dependency in package.json and install and update it using

npm install
npom update

Using Highcharts

Note: Any function which is creating a chart using Highcharts should wait for DOM load to complete for the chart to load correctly because chart will be loaded inside a DOM element

// If you want to define type inside the options variable
import Highcharts from 'highcharts/highcharts-gantt';
// React related highchart dependency
import HighchartsReact from 'highcharts-react-official';
// If you want to import a chart type separately, some chart options are not present in this
import PieChart from 'highcharts-react-official';

So now we will create data in the format below

const dataPoints: {
    name: string; // name of the dataPoint
    y: any; // datapoint value
    color: string; // color to be used show datapoint
}[]

and now we will create options, i.e. the whole schema which will be used to render chart

 chart: {
            type: 'pie', /* type of chart */
            plotBackgroundColor: null,
            height: '150',
            plotShadow: false,
        },
        title: {
            text: 'Sample pie chart',
        },
        credits: {
            enabled: false,
        },
        series: [ 
              /* 
              the data mentioned here will be applicable to overall 
              series under this chart 
              */
            {
                innerSize: '50%', 
                name: '',
                lineWidth: 0.5,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 1,
                    states: {
                        hover: {
                            enabled: true,
                            lineWidth: 0.5,
                        },
                    },
                },
                data,
            },
        ],
        legend: {
            /* 
              Vertically legends, aligned to the right
             */
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            itemMarginTop: 2,
            /* 
              Allows the user to have a customize chart label formatter
             */
            labelFormatter(this: { [key: string]: any }): string {
                const labelVal = this?.options;
                return `${labelVal.name}: ${labelVal.y}`;
            },
        },
        plotOptions: {
              /* 
              the data mentioned here will be applicable to only pie-chart 
              series under this chart 
              */
            pie: {
              /* 
              if you want to create a donut chart then you can provide 
              size of inner cirlce
              */
                innerSize: 50, 
              /* 
              Height of pie-chart
              */
                size: 150,
                allowPointSelect: true,
                cursor: 'pointer',
              /* 
              If enabled = false, then data label will not show over chart
              */
                dataLabels: {
                    enabled: true,
                },
                showInLegend: true,
            },
        },
    };

once we have the option list created as above, we can pass that into out chart module like:

<PieChart highcharts={Highcharts} options={sampleOptions} />

and then we will have our pic-chart using Highcharts available

sample image

You can always refer Highcharts documentations for extensive learning.

Reference taken: https://www.highcharts.com/docs/getting-started