Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="chart-1" style="height: 200px; width: 500px"></div>
<div id="chart-2" style="height: 200px; width: 500px"></div>
<div id="chart-3" style="height: 200px; width: 500px"></div>

CSS

#chart-1 {
  margin-bottom: 50px;
}

JavaScript

// Global functions
jQuery(function() {

  Highcharts.setOptions({
    colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
    chart: {
      style: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12px',
        color: '#585858',
      }
    },
    title: {
      text: null
    },
    subtitle: {
      text: null
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
        }
      },
      lineColor: '#e4e4e4',
      lineWidth: 1,
      tickLength: 0,
    },
    yAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
        }
      },
      lineColor: '#e4e4e4',
      lineWidth: 1,
      gridLineDashStyle: 'dash',
    },
    series: [{
      backgroundColor: "rgba(0 ,0, 0, 0.5)",
    }],
    plotOptions: {
      area: {
        stacking: 'normal',
        lineWidth: 1,
        fillOpacity: 0.1,
        marker: {
          lineWidth: 1.5,
          symbol: 'circle',
          fillColor: 'white',
        },
        legend: {
          radius: 2,
        }
      }
    },
    tooltip: {
      shared: true,
    },
    legend: {
      itemStyle: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12',
        color: '#585858',
      },
      marker: {
        symbol: 'square',
        verticalAlign: 'middle',
        radius: '4',
      },
      symbolHeight: 6,
      symbolWidth: 6,
    },

  });

});

$(function() {
  $('#chart-1').highcharts({
    chart: {
      type: 'area'
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%eth %b'
      },
      title: {
        text: 'Date',
      }
    },

    yAxis: {
      title: {
        text: 'Count'
      },
    },
    series: [{
      name: 'Unique open',
      lineColor: '#fb8b4b',
      backgroundColor: "rgba(0 ,0, 0, 0.5)",
     ...