AnyChart sample

HTML

<script src="//cdn.anychart.com/js/7.6.0/anychart-bundle.min.js"></script>
<script src="//cdn.anychart.com/js/7.6.0/anychart-bundle.min.js"></script>
<div id="container"></div>

CSS

html, body, #container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

anychart.onDocumentReady(function() {
  // create column chart
  chart = anychart.column();

  // set container id for the chart
  chart.container('container');

  // set chart title text settings
  chart.title('Range Column Chart');

  // create  series with passed data
  var ranges_data_1 = anychart.data.set([
    {GeolFrom: 393, GeolTo: 522, month: 'Jan'},
    {low: 425, high: 622, month: 'Feb'},
    {low: 419, high: 612, month: 'Mar'},
    {low: 492, high: 752, month: 'Apr'},
      {low: 150, high: 550, month: 'May'}
]);

  var data_1 = ranges_data_1.mapAs(null, {x: ['month']});
  
  var series_1 = chart.rangeColumn(data_1);

  // create  series with passed data
  var ranges_data_2 = anychart.data.set([
    {low: 522, high: 622, month: 'Jan', fill:{color: 'red'}},
    {low: 622, high: 722, month: 'Feb'},
    {low: 319, high: 419, month: 'Mar'},
    {low: 852, high: 952, month: 'Apr', fill:{color: '#E9E9E9'}},
      {low: 600, high: 789, month: 'May'}
]);

  var data_2 = ranges_data_2.mapAs(null, {x: ['month']});
  
  var series_2 = chart.rangeColumn(data_2);
  
  chart.yScale().stackMode('value');

  // initiate chart drawing
  chart.draw();
});