Stats

92 Contributors: 8
2017-01-24
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook

Getting started with highcharts

Download highcharts eBook

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

VersionRelease date
5.0.02016-09-29
4.0.02014-04-22
3.0.02013-03-22
2.0.02010-07-13
1.0.02009-11-27

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

BrandVersions Supported
Internet Explorer6.0 +
Firefox2.0 +
Chrome1.0 +
Safari4.0 +
Opera9.0 +
iOS (Safari)3.0 +
Android Browser2.0 +

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

Hello World

Begin by including highcharts.js in your index.html

<html>
  <head>
    <script src="http://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.

Installation or Setup

Ways to get Highcharts:

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.