How to implement Highchart JS

If you’re looking to add some interactive charts to your web page, Highcharts JS is a great option.

The Highcharts library comes with all the tools you need to create reliable and secure data visualizations.

In this article, we will should you how to implement Highchart library.

There have 2 ways to use the library.

• Use the Highcharts CDN

Instead of downloading, feel free to use the Highcharts CDN to access files directly.

<script src="https://code.highcharts.com/highcharts.js"></script>

• Install Highcharts with NPM

The official Highcharts NPM package comes with support for CommonJS and contains Highcharts, and its Stock, Maps and Gantt packages. Read more about how to install Highcharts with NPM.

npm install highcharts --save

Let’s get start to make a simple chart.

Column Chart

1. Include the Highcharts JS library.

<script src=”https://code.highcharts.com/highcharts.js"></script>

2. Create a container element for the chart.

<div id=”container”></div>

3. Set up the chart options.

Highcharts.chart('container', {
    data: {
        table: 'datatable'
    },
    chart: {
        type: 'column'
    },
    title: {
        text: 'Data extracted from a HTML table in the page'
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: 'Units'
        }
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                this.point.y + ' ' + this.point.name.toLowerCase();
        }
    }
});

Pie Chart