[Chartjs]-Draw line on Chart.js bar

by

5👍

✅

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>

Leave a comment