Getting started with highcharts

Remarks#

Highcharts is a JavaScript charting library that can be set up using options in JSON-format. It supports a wide range of chart types by default, and also allows for plugins. It is also the core for several side products like Highstock and Highmaps.

Highcharts is free for non-commercial and personal use, with licenses only needed for commercial applications.

Versions#

Version	Release date
5.0.0	2016-09-29
4.0.0	2014-04-22
3.0.0	2013-03-22
2.0.0	2010-07-13
1.0.0	2009-11-27

Installation or Setup

Ways to get Highcharts:

Load directly from Highcharts CDN
Download files from official website.
Through npm;

npm install highcharts
Through bower;

bower install highcharts

To load the main library from vendor’s CDN, simply add the following to your code:

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

Supplementary libraries, such as the exporting module should be loaded after your highcharts.js declaration.

Calling the libraries directly from Highcharts will provide you the most up-to-date version. However, if you have specific charts that function best with a certain version or you wish to optimize your website’s performance, you may consider storing the files locally.

The following resources offer detailed information on installing and configuring Highcharts, as well as supplementary libraries and modules you can use to customize your charts beyond the default installation.

Hello World

Begin by including highcharts.js in your index.html

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

Add a <div> to contain your chart

  <body>
    <div id="chart">
      <!-- Chart goes here -->
    </div>

Specify the configuration to create the chart. The mininum configuration required to create a chart is -

Where does the chart go? - chart.renderTo

What is the data to be plotted? - There are a few ways to feed in the data to be plotted; the most common among them being the series object.

 var chartOptions = {
     chart: {
         renderTo: 'chart'  
     },
     series: [{      
         data: [1, 2]
     }]  
 };
 var chartHandle = Highcharts.Chart(chartOptions);

This creates a plot as follows - fiddle.

There are numerous configuration options that can be added to the chart, a few common ones being,

chart.type - What type of chart do you want to plot?
title - Configuration for the title of the chart
xAxis/yAxis - Configuration for the x-axis/y-axis of the chart

A complete list of all configuration options can be found here.

    <script>
    var chartOptions = {
      chart: {
        renderTo: 'chart',
        type: 'bar'
      },
      title: {
        text: 'Hello Highcharts'
      },
      xAxis: {
        categories: ['Hello', 'World']
      },
      yAxis: {
        title: 'Value'
      },
      series: [{
        name: 'Highcharts Intro',
        data: [1, 2]
      }]
    };

    var chart = new Highcharts.Chart(chartOptions);
    
    </script>
  </body>
</html>

JSFiddle Example

A good place to start in the Highcharts doc would be here.

Colors

In Highcharts, there is an array containing the default colors for the chart’s series. When all colors are used, new colors are pulled from the start again.

Defaults colors for version 4.x and 5.x are:

colors: [
    '#7cb5ec', 
    '#434348', 
    '#90ed7d', 
    '#f7a35c', 
    '#8085e9', 
    '#f15c80', 
    '#e4d354', 
    '#2b908f', 
    '#f45b5b', 
    '#91e8e1'
]

In Highcharts 3.x, the default colors were:

colors: [
    '#2f7ed8', 
    '#0d233a', 
    '#8bbc21', 
    '#910000', 
    '#1aadce', 
    '#492970', 
    '#f28f43', 
    '#77a1e5', 
    '#c42525', 
    '#a6c96a'

]

In Highcharts 2.x, the default colors were:

colors: [
    '#4572A7', 
    '#AA4643', 
    '#89A54E', 
    '#80699B', 
    '#3D96AE', 
    '#DB843D', 
    '#92A8CD', 
    '#A47D7C', 
    '#B5CA92'
]

Compatibility

Brand	Versions Supported
Internet Explorer	6.0 +
Firefox	2.0 +
Chrome	1.0 +
Safari	4.0 +
Opera	9.0 +
iOS (Safari)	3.0 +
Android Browser	2.0 +

Highcharts supports jQuery version 1.6+ for legacy browsers, and 2.0+ for modern browsers.