Combination of Range Bar & Error Chart - CanvasJS JavaScript Charts

Combination of Range Bar & Error Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
                               { 
  title: {
    text: "Combination of Range Bar & Error Chart"
  },
  axisY: {
    includeZero: false,
  },
  data: [
    {
      type: "rangeBar",
      dataPoints: [
        { x: 1, y: [10, 12], name: "Datapoint 1" }, 
        { x: 2, y: [12, 14], name: "Datapoint 2"  },
        { x: 3, y: [14, 16], name: "Datapoint 3"  },
        { x: 4, y: [16, 18], name: "Datapoint 4"  },
        { x: 5, y: [18, 20], name: "Datapoint 5" }, 
        { x: 6, y: [20, 22], name: "Datapoint 6"  }
      ]
    }
  ]
});

chart.render();
addLabels(chart);

function addLabels(chart) {
	var axisXInterval = chart.axisX[0].get("interval");
  var xValue, yValue, dps = [];
  
	for(var i = 0; i < chart.data[0].dataPoints.length; i++) {  	
    xValue = axisXInterval / 2 + chart.data[0].dataPoints[i].x;
    yValue = ((chart.data[0].dataPoints[i].y[0] +  chart.data[0].dataPoints[i].y[1]) / 2) + 0.5;
    dps.push({ x: xValue, y: [yValue, yValue], name: chart.data[0].dataPoints[i].name});
  }
  chart.options.data.push({ type: "error", 
  													whiskerLength: 0,
                            stemThickness: 0,
                            toolTipContent: null,
                            highlightEnabled: false,
                            indexLabelFormatter: function(e){ 
                            		if(e.index === 0)
                                		return e.dataPoint.name; 
                                 return ""
                            },
  													dataPoints: dps
                          });
  chart.render();
}