Adding Border to Range Bar Chart - CanvasJS JavaScript Charts

Adding Border to Range Bar 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: "Adding border in Range Bar Chart"
  },
  axisY: {
    includeZero: false,
  },
  data: [
    {
      type: "rangeBar",
      dataPoints: [
        { x: 1, y: [20, 33] }, 
        { x: 2, y: [22, 30] },
        { x: 3, y: [25, 32] },
        { x: 4, y: [26, 34] }
      ]
    }					
  ]
});
var borderWidth = 2;

chart.render();
addBorderToDataPoint(chart, borderWidth);


function addBorderToDataPoint(chart, borderWidth){

  var ctx = chart.ctx;
  ctx.save();
  var plotArea = chart.plotArea;
  ctx.beginPath();
  ctx.rect(plotArea.x1, plotArea.y1, plotArea.x2 -  plotArea.x1, plotArea.y2 - plotArea.y1);
  ctx.clip();
  ctx.lineWidth = borderWidth || 2;

  for(var i = 0; i < chart.data.length; i++){
    if(chart.data[i].type === "rangeBar"){
      for(var j = 0; j < chart.data[i].dataPointIds.length; j++){
        dataPointInfo = chart._eventManager.objectMap[chart.data[i].dataPointIds[j]];
        ctx.beginPath();
        ctx.rect(dataPointInfo.x1, dataPointInfo.y1, dataPointInfo.x2 - dataPointInfo.x1, dataPointInfo.y2 - dataPointInfo.y1);
        ctx.stroke();
      }
    }
  }
  ctx.restore();
}