Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

CSS

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

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  title: {
    text: '2023 Monthly Maximum and Minimum Temperatures'
  },

  subtitle: {
    text: 'Source: Weather Station'
  },

  // Get data from the 2023 CSV file
  xAxis: {
    type: 'category'
  },
  series: [{
    data: [
      ["Jan", 68.2],
      ["Feb", 80.9],
      ["Mar", 81.9],
      ["Apr", 88.9],
      ["May", 86.7],
      ["Jun", 92.7],
      ["Jul", 99],
      ["Aug", 97.9],
      ["Sep", 98.8],
      ["Oct", 86.1],
      ["Nov", 79.3],
      ["Dec", 61.3]
    ]
  }, {
    data: [
      ["Jan", 21.7],
      ["Feb", 12.2],
      ["Mar", 21.7],
      ["Apr", 28.9],
      ["May", 40.1],
      ["Jun", 48],
      ["Jul", 60.6],
      ["Aug", 55.1],
      ["Sep", 48],
      ["Oct", 34.1],
      ["Nov", 19.1],
      ["Dec", 21.4]
    ]
  }],
  plotOptions: {
    bar: {
      colorByPoint: true
    },
    series: { // series colors from purple (cold) to red (hot)
      zones: [{
        color: '#CC0066',
        value: -10
      }, {
        color: '#CC00CC',
        value: 0
      }, {
        color: '#6600CC',
        value: 10
      }, {
        color: '#0000CC',
        value: 20
      }, {
        color: '#0066CC',
        value: 30
      }, {
        color: '#00CCCC',
        value: 40
      }, {
        color: '#00CC66',
        value: 50
      }, {
        color: '#00CC00',
        value: 60
      }, {
        color: '#66CC00',
        value: 70
      }, {
        color: '#CCCC00',
        value: 80
      }, {
        color: '#CC6600',
        value: 90
      }, {
        color: '#CC0000',
        value: Number.MAX_VALUE
      }],
      dataLabels: {
        enabled: true,
        format: '{point.y:.B0f}'
      }
    }
  },
  yAxis: {
    title: {
      text: 'Temperature (\xB0F)'
    },
    min: 0, // y-axis minimum value
    max: 110, // y-axis maximum value
    tickInterval: 10, // y-axis tick interval
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
  ...