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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'areaspline',
    events: {
      render() {
        let chart = this,
          legendAttr = chart.legend.box.getBBox(),
          padding = 5;

        chart.plus = chart.renderer.text('| +', chart.legend.box.parentGroup.alignAttr.translateX + legendAttr.width + padding, chart.spacingBox.height + padding / 2).attr({
          cursor: 'pointer',
        }).css({
          fontSize: 20
        }).on(
          "click",
          function() {
            alert('plus was clicked')
          }
        ).add()
      }
    }
  },
  title: {
    text: 'Average fruit consumption during one week'
  },
  legend: {
    align: 'left',
    useHTML: true,
    lineHeight: 30,
  },
  xAxis: {
    categories: [
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
      'Sunday'
    ],
    plotBands: [{ // visualize the weekend
      from: 4.5,
      to: 6.5,
      color: '#f8f8f8',
      label: {
        text: '<em>FORECAST</em>',
        style: {
          color: '#057aff',
          fontWeight: 'bold'
        },
        y: 20
      }
    }]
  },
  yAxis: {
    title: {
      text: 'Fruit units'
    }
  },
  tooltip: {
    shared: true,
    valueSuffix: ' units'
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    areaspline: {
      fillOpacity: 0.5
    }
  },
  series: [{
    name: 'Kia',
    data: [3, 4, 3, 5, 4, 10, 12]
  }, {
    name: 'Ford',
    data: [1, 3, 4, 3, 3, 5, 4]
  }, {
    name: 'BMW',
    data: [1, 7, 4, 1, 3, 5, 3]
  }]
});