JSFiddle - React, Tailwind, and code Playground

by sridhar reddy

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'columnrange'
    },

    title: {
      text: 'Temperature variation by month'
    },

    subtitle: {
      text: 'Observed in Vik i Sogn, Norway'
    },

    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    yAxis: {
      title: {
        text: ''
      }
    },

    plotOptions: {
      columnrange: {
        negativeColor: 'red',
        threshold: 0,
        dataLabels: {
          enabled: true,
          formatter: function() {
           console.log('')
          }
        }
      }
    },

    legend: {
      enabled: false
    },
    credits: {
    	enabled: false
    },

    series: [{
      name: 'Temperatures',
      data: [
                [0,9.4, -2],
                [1,-8.7],[1,6.5],
                [2,-3.5,0],[1,0,9.4],
                [3,-1.4,0],[2,0,19.9],
                [4,0.0],[4,0,22.6],
                [5,2.9, 29.5],
                [6,9.2, 30.7],
                [7,7.3, 26.5],
                [8,4.4, 18.0],
                [9,-3.1,0],[9,0,11.4],
                [10,-5.2,0],[10,0,10.4],
                [11,-13.5,0],[11,0,9.8]
            ]
    }]

  });

});