Draw line on Chart.js bar

Question

I'm using Chart.js and I will create a small bar chart. How can I draw red line on y axis (without create new datasets) in any point like on picture?

It's not problem to create this line in different kind of chart, but in bar chart I cannot find any solution for this.

My code:

<!doctype html>
<html>
    <head>
        <title>Bar Chart</title>
        <script src="../Chart.js"></script>
    </head>
    <body>
        <div style="width: 50%">
            <canvas id="canvas" height="450" width="600"></canvas>
        </div>


    <script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*70)};

    var orders = [ '181-1','181-2','181-3','182-1','183-1','183-2','183-3','183-4','184-1','184-2'];

    var barChartData = {
        labels : orders,
        datasets : [
            {
                label: "Order",
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,0.8)",
                highlightFill: "rgba(151,187,205,0.75)",
                highlightStroke: "rgba(151,187,205,1)",
                data : [6,randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),5,6]
            }
        ]

    }



    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");

        var chart = new Chart(ctx).Bar(barChartData, {
            responsive : true,
            animation: true,
            barValueSpacing : 5,
            barDatasetSpacing : 1,
            tooltipFillColor: "rgba(0,0,0,0.8)",                
        //  multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
            tooltipTemplate: function(valuesObject){
                console.log(valuesObject);
                // do different things here based on whatever you want;

                var label = valuesObject.label
                var objLen = label.length;
                // 111-1
                var string = label.substring(0,objLen-2);

                console.log(string);

                return "Order nr: " + string;
                }           


            });

Narendra CM Narendra CM · Accepted Answer · 2016-02-23T12:29:36

To add red line you need to extend the default bar chart and add the red line to specific position. Here is the code which adds the red line to Bar chart. You just need to calculate the position where you need to add red line.

Here is the complete HTML

<!doctype html>
	<html>
		<head>
			<title>Bar Chart</title>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
		</head>
		<body>
			<div style="width: 50%">
				<canvas id="canvas" height="450" width="600"></canvas>
			</div>


		<script type="text/javascript">
		var randomScalingFactor = function(){ return Math.round(Math.random()*70)};

		var orders = [ '181-1','181-2','181-3','182-1','183-1','183-2','183-3','183-4','184-1','184-2'];

		var barChartData = {
			labels : orders,
			datasets : [
				{
					label: "Order",
					fillColor: "rgba(151,187,205,0.5)",
					strokeColor: "rgba(151,187,205,0.8)",
					highlightFill: "rgba(151,187,205,0.75)",
					highlightStroke: "rgba(151,187,205,1)",
					data : [6,randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),5,6]
				}
			]

		}



		window.onload = function(){
			var ctx = document.getElementById("canvas").getContext("2d");
			

			// Notice now we're extending the particular Bar chart type, rather than the base class.
			Chart.types.Bar.extend({
				// Passing in a name registers this chart in the Chart namespace in the same way
				name: "BarAlt",
				initialize: function(data){
					console.log('Bar chart extension to add red line');
					Chart.types.Bar.prototype.initialize.apply(this, arguments);
				},
				draw: function() {
					Chart.types.Bar.prototype.draw.apply(this, arguments);
					this.chart.ctx.beginPath();
					this.chart.ctx.beginPath();
					this.chart.ctx.moveTo(25, 50);
					this.chart.ctx.lineTo(1000,50);
					this.chart.ctx.strokeStyle="red";
					this.chart.ctx.stroke();	
				}
			});

			var chart = new Chart(ctx).BarAlt(barChartData, {
				responsive : true,
				animation: true,
				barValueSpacing : 5,
				barDatasetSpacing : 1,
				tooltipFillColor: "rgba(0,0,0,0.8)",                
			//  multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
				tooltipTemplate: function(valuesObject){
					console.log(valuesObject);
					// do different things here based on whatever you want;

					var label = valuesObject.label
					var objLen = label.length;
					// 111-1
					var string = label.substring(0,objLen-2);

					console.log(string);

					return "Order nr: " + string;
					}           


				});
		}
			</script>
		</body>
		
		</html>

Draw line on Chart.js bar

1 Answers