How to use Highcharts.js in front-end

Introduction

Highcharts.js is a popular library to draw several graphs like dot, bar, heatmap, etc...

I like Highcharts.js and I've used Highcharts.js many times.

However, if you want to use highcharts.js, the license must be verified and used.

To get a free license, you only must use highcharts.js on a personal website or non-profit organization.

Subject

1. About

Highcharts is a battle-tested SVG-based, multi-platform charting library that has been actively developed since 2009.

It makes it easy to add interactively, mobile-optimized charts to your web and mobile projects.

It features robust documentation, advanced responsiveness and industry-leading accessibility support.

 

2. How to use in source code

This post explains the way I use it.

Highcharts type default value is a line and can display several series of data.

The below code is a basic example and I will explain as I expand the source code below.

Highcharts.chart('container', {
	title : {
  	text : 'basic example'
  },
  series: [{
  	name : 'data',
    data : [1, 2, 3, 4, 5]
  }]
});

https://jsfiddle.net/devsong26/omvsj5fc/

 

- chart option

Highcharts has several chart types and can be found at the URL below.

https://www.highcharts.com/docs/chart-and-series-types/chart-types

 

If you change a chart type, add a chart option in source code.

https://jsfiddle.net/devsong26/pLoq85mx/

 

- tooltip option

You can set the options for the tooltip that appears when the user hovers over a series or point.

https://jsfiddle.net/devsong26/46d7yq98/

 

- plotOptions option

The plotOptions is a wrapper object for the config object for each series type.

The config objects for each series can also be overridden for each series item as given in the series array.

https://jsfiddle.net/devsong26/qzb7fn6v/

 

- xAxis, yAxis option

You can customize a chart axis displayed data.

https://jsfiddle.net/devsong26/jfv0aLdw/

 

3. application

In fact, I wanted to write this part so I posted this post.

I found a way to access highcharts by code, and if using an index, access to specific charts.

//code that to access chart list.
Highcharts.charts

//code that to access chart corresponding to the index
Highcharts.charts[0]

I suffered the problems like below.

- must hide duplicated series name on xAxis.

- must move series name on xAxis after chart loading.

- must toggle the series display.

 

Why did I face this problem?

It was necessary to toggle the series display with the same name but different values.

 

I can solve the charts problem in this way that using the chart load event option.

The load event runs after a complete chart load.

 

A solution to the problems above.

- must hide duplicated series name on xAxis.

https://jsfiddle.net/devsong26/wgurL71q/

- must move series name on xAxis after chart loading.

https://jsfiddle.net/devsong26/rvxqof0g/

- must toggle the series display.

https://jsfiddle.net/devsong26/Ldb5t0ow/

 

If showInLegend is false, series hid but when again show series, series name gray out.

Because of the series name gray out. I hid all series legend group.

Conclusion

It took me about three days to solve the problem.

I hope people with the same problems will benefit from my posts.

 

Reference URL

About highcharts.js license

https://www.highcharts.com/blog/products/highcharts/

Highchart API

https://api.highcharts.com/highcharts/