JSFiddle - React, Tailwind, and code Playground

by anikettiwari

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',
      inverted: true
    },

    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: 'Temperature ( °C )'
      }
    },

    tooltip: {
      valueSuffix: '°C'
    },

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

    legend: {
      enabled: false
    },

    series: [{
      name: 'Temperatures',
      data: [
 
                [1,-8.7,0],[1,0,6.5],
                [2,-3.5,0],[2,0,9.4],
               
            ]
    }]

  });

});