Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column',
    zoomType: 'xy'
  },
  title: {
    text: ''
  },
  xAxis: {
    categories: [

      '[email protected]',

      '[email protected]',

      '[email protected]',

    ],
    max: 2,
    title: {
      text: 'title'
    }
  },
  yAxis: [{
    min: 0,
    max: 1000,
    labels: {
      format: '',
    },
    title: {
      text: 'Open Count',
    },
    opposite: true
  }, {
    step: 1,
    min: 0,
    max: 1000,
    title: {
      text: 'Open Percentage',
    },
    labels: {}
  }],
  tooltip: {
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    },
    pie: {
      point: {
        cursor: 'pointer',
        events: {
          legendItemClick: function(e) {
            var index = this.index;
            var chart = this.series.chart;
            var series = chart.series;
            var len = series.length - 1;

            if (this.visible) {
              series[0].points[index].graphic.hide();
            } else {
              series[0].points[index].graphic.show();
            }


          }
        }
      },
    }
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  scrollbar: {
    enabled: true,
  },
  legend: {
    enabled: true,
    itemWidth: 100,
    width: 400,
    align: 'center',
    title: {
      text: '!'
    },
    labelFormatter: function() {
      if (this.stickyTracking == true) {
        return '<i>' + this.name + '</i>';
      } else {
        return '<b>' + this.name + '</b>';
      }
    }
  },
  series: [{
    name: 'Sent',
    yAxis: 1,
    data: [100, 160, 140]
  }, {
    name: 'Opens',
    yAxis: 1,
    data: [4, 4, 6]
  }, {
    name: 'click',
    yAxis: 1,
    data: [2, 2, 3]
  }, {
    type: 'spline',
    name: 'Open ratio',
    data: [
      4.0, 2.5, 4.3,
    ],
    tooltip: {
      valueSuffix: ' %'
    }
  }, {
    type: 'pie',
    name: 'SENT',
    data: [{
        name:...