Column chart with average line at y - axis - CanvasJS

Column chart with average line at y - axis - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var average;

var chart= new CanvasJS.Chart("chartContainer", {
    title:{
        text: "Column chart with average line at y-axis"
    },
    axisY: {        
        stripLines: [
        {
            value : null,
            label: "Average: "
        }
        ]
    },
    data: [   
    {
        type: "column",        
        dataPoints: [        
            { x: 10, y: 10 },            
            { x: 20, y: 20 },
            { x: 30, y: 40 }
        ]
    }
    ]
});


var sum = 0;
var length = chart.options.data[0].dataPoints.length;
for( var i = 0; i < length; i++ )
    sum += chart.options.data[0].dataPoints[i].y;
average = sum / length;


chart.options.axisY.stripLines[0].value = average;
chart.options.axisY.stripLines[0].label += average.toPrecision(3);

chart.render();