Getting started with highcharts

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="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.

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.