Highcharts Demo

author(s): Torstein Hønsi

by koh_edwin

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"></div>

CSS

#container {
    height: 400px;
}

sup {
  font-size: 1em !important; /* Makes the superscript 75% of the parent font size */
  vertical-align: super !important; /* Positions the text correctly as superscript */
}

JavaScript

const er = String.fromCharCode(7497) + String.fromCharCode(691);
Highcharts.chart('container', {
  exporting: {
    showTable: true,
    filename: 'this is the filename',
    tableCaption: 'This will have the indicator and metric different from the chart',
    csv: {
      columnHeaderFormatter: function (item, key) {
        
        if (!item || item instanceof Highcharts.Axis) {
          return item.options.title.text;
        } else if (item instanceof Highcharts.Series) {
          return  item.name
        }
        
      },
      //
      dateFormat: '%Y-%m-%d',
    },
  },
  title: {
    text: 'Indicator name',
  },

  xAxis: {
    type: 'datetime',
    title: {
            text: 'Time frame' 
        }
  },

  plotOptions: {
    series: {
      pointStart: '2015-01-01',
      pointIntervalUnit: 'year',
    },
  },

  series: [
    {
      name: 'Canada',
      data: [
        29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
        95.6, 54.4,
      ],
    },
    {
      name: 'Ontario',
      data: [
        144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4,
        129.2,
      ],
    },
  ],
});