Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

const initialSeries = [{
  name: 'Tokyo',
  data: [
    ["tokyo", 10],
    ["tokyo", 63],
    ["tokyo", 50],
    ["tokyo", 54],
    ["tokyo", 49],
    ["tokyo", 33],
    ["tokyo", 17],
    ["tokyo", 15],
    ["tokyo", 11]
  ]

}, {
  name: 'New York',
  data: [
    ['New York', 56],
    ['New York', 79],
    ['New York', 97],
    ['New York', 18.4],
    ['New York', 65],
    ['New York', 140.5],
    ['New York', 43],
    ['New York', 88],
    ['New York', 4]
  ]

}, {
  name: 'London',
  data: [
    ['London', 9],
    ['London', 30],
    ['London', 51],
    ['London', 58],
    ['London', 56],
    ['London', 285],
    ['London', 11],
    ['London', 414],
    ['London', 53],
    ['London', 8],
    ['London', 145],
    ['London', 2]
  ]
}, {
  name: 'Berlin',
  data: [
    ['Berlin', 14],
    ['Berlin', 136],
    ['Berlin', 82],
    ['Berlin', 56],
    ['Berlin', 79],
    ['Berlin', 97],
    ['Berlin', 18],
    ['Berlin', 65],
    ['Berlin', 14],
    ['Berlin', 43],
    ['Berlin', 88],
    ['Berlin', 4]
  ]
}];

const parsedData = initialSeries.map(s => ({
  name: s.name,
  data: [
    s.data.reduce((result, currentEl) => {
      return [result[0], result[1] += currentEl[1]]
    }, [s.name, 0])
  ]
}));

Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    type: 'category',
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0,
      grouping: false
    }
  },
  series: parsedData
});