Global production timeline

coal trade map data

by Ayri Rin

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: [{
      linearGradient: {
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 1
      },
      stops: [
        [0, '#ff3399'],
        [1, '#3366AA']
      ]
    }, {
      linearGradient: {
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 1
      },
      stops: [
        [0, '#f03399'],
        [1, '#bada55']
      ]
    }, '#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:...