JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
<div id="stockChartContainer" style="height: 450px; width: 100%;"></div>

JavaScript

var dataPoints1 = [], dataPoints2 = [];
var stockChart = new CanvasJS.StockChart("stockChartContainer",{
  title:{
    text:"Range Column Chart in Navigator"
  },
  charts: [{
    axisY: {
      suffix: "°C"
    },
    data: [{
      type: "rangeColumn",
      xValueFormatString: "YYYY",
      toolTipContent: "<span style=\"color:#4F81BC\">Year: {x}</span><br/>Min: {y[0]}°C,<br/> Max: {y[1]}°C",
      dataPoints : dataPoints1
    }]
  }],
  rangeSelector: {
    buttons: [{
      label: "10Y",
      range: 10,
      rangeType: "year"
    },{
      label: "20Y",
      range: 20,
      rangeType: "year"
    },{
      label: "50Y",
      range: 50,
      rangeType: "year"
    },{
      label: "All",
      range: null,
      rangeType: "all"
    }]
  }
});
$.getJSON("https://canvasjs.com/data/gallery/stock-chart/weather-india.json", function(data) {
  for(var i = 0; i < data.length; i++){
    dataPoints1.push({x: new Date(data[i].year, 00, 00), y: [Number(data[i].min), Number(data[i].max)]});
    dataPoints2.push({x: new Date(data[i].year, 00, 00), y: Number(data[i].avg)});
  }
  stockChart.render();
});