Global production timeline

coal trade map data

by kakss

HTML

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

<div id="container"></div>

JavaScript

$(function() {
  Highcharts.setOptions({

    // here is the CB colour scheme
    // dark blue - 0b4572
    // yellow - EFC530
    // light blue - 2f8fce
    // red - C7432B
    // light grey - 999999
    // lilac - A14A7B
    // orange - DF9239

    // this line sets the colours
    // the first colour is for bottom chunk of a stacked column (reversed: false)
    // here I've used a gradient of 15 steps from CB dark blue to red, via grey
    // you can make your own gradient custom here:
    // http://www.strangeplanet.fr/work/gradient-generator/?c=9:FFFFFF:000000

    colors: ['#0b4572', '#EFC530', '#2f8fce', '#C7432B', '#999999', '#DF9239', '#A14A7B'],

    chart: {

      //    set the font family for the chart. PT Serif is CB default for body text.

      style: {
        fontFamily: 'PT Serif'
      }
    }
  });

  // Create the chart
  // type: 'column'
  // creates column chart. See www.highcharts.com/demo/ for more options
  // zoomType: 'x,y'
  // allows the user to zoom in to the chart on the x and y axis
  // you can set to allow x zoom or y zoom only

  $('#container').highcharts({
      chart: {
        renderTo: 'container',
        backgroundColor: 'transparent',
        type: 'area',
        zoomType: 'x'
      },
      rangeSelector: {
        selected: 1
      },

      // set the title of the chart (here no title)

      title: {
        text: ''
      },

      // turn off the highcharts credit

      credits: {
        enabled: false
      },

      // controls how the columns stack
      // options are 'normal' and 'percent'
      // if you don't want stacked columns, delete this section
 tooltip: {
          pointFormat: '{series.name} <b>{point.y:,.0f} Mt</b><br/>',
//          crosshairs: 'true'
        },

      plotOptions: {
        column: {
          stacking: 'normal'
        },
        area: {
          marker: {
            enabled: false,
            symbol: 'circle',
            radius: 2,
            states: {
             ...