Adding Border to Columns in Column Chart - CanvasJS JavaScript Charts

Adding Border to Columns in Column 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 to Column"
  },
	data: [
	{
		type: "column",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}					
	]
});
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 === "column"){
  	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();
}