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/highcharts-more.js"></script>

<div id="container"></div>
<button id="btn">
update the data
</button>

JavaScript

let chart = Highcharts.chart('container', {


  chart: {
    type: 'columnrange',
    backgroundColor: 'rgba(0,0,0,0)',
    borderWidth: 0,
    margin: [12, 6, 36, 20]
  },

  title: {
    text: null,
  },

  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },

  xAxis: {
    categories: [1, 2, 3, 4],
    labels: {
      y: 30,
      style: {
        color: 'white',
        fontSize: '10px',
        fontWeight: 'bold'
      }
    }
  },
  yAxis: {
    title: {
      enabled: false,
      x: -14,
    },
    labels: {
      align: 'left'
    },
    maxPadding: 0.5,
    plotLines: [{
      value: 10, //normmax
      width: 2,
      color: '#FF0000'
    }, {
      value: 2, //normmin
      width: 2,
      color: '#009ACD'
    }]
  },

  tooltip: {
    enabled: false
  },

  plotOptions: {
    columnrange: {
      dataLabels: {
        enabled: true,
        style: {
          textOutline: 'none'
        },
        crop: false,
        overflow: 'none',
        formatter: function() {
          var color = this.y === this.point.high ? '#33C4FF' : 'red';
          return '<span style="font-size: 12px; font-family:helvetica; font-weight:normal; text-shadow: none; color:' + color + '">' + this.y + '°</span>';
        }
      }
    }
  },

  legend: {
    enabled: false
  },

  series: [{
    name: 'Temperatures',
    data: [
      [20, -3],
      [5, -2],
      [6, -2],
      [8, -15]
    ],
    color: '#b9deea',
    borderColor: '#92cbde',
    borderRadius: 4
  }]

});

let dataJson = [{
  "period": "Monday",
  "condition": "Cloudy",
  "high_temperature": "7",
  "low_temperature": "-2",
  "icon_code": "10",
  "precip_probability": "20"
}, {
  "period": "Tuesday",
  "condition": "A mix of sun and cloud",
  "high_temperature": "6",
  "low_temperature": "-2",
  "icon_code": "02",
  "precip_probability": "20"
}, {
  "period": "Wednesday",
  "condition": "A mix of sun and cloud",
  "high_temperature": "3",
  "low_temperature": "-5",
  "icon_code":...