Spot line at the top of the histogram

Question

I created a combined double histogram using chartjs. My code is below. The combo dual chart bar is working fine, but I had a requirement to put a line for the green graph that connects all its upper midpoints. I drew a little line graph connecting the green graph, but the problem I am facing is that the dot point of the linear graph is not in the upper middle of the green histogram, as shown below.

Can someone tell me how to make a line spot in the upper middle of the histogram

Working demo

HTML

<canvas id="canvas"></canvas> 

Js

 var barChartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ type: 'bar', label: "Visitor", data: [10, 59, 340, 521, 450, 200, 195], fill: false, backgroundColor: "rgba(220,220,220,0.5)", borderColor: '#71B37C', hoverBackgroundColor: '#71B37C', hoverBorderColor: '#71B37C' }, { type: 'bar', label: "Visitor", data: [200, 185, 590, 621, 250, 400, 95], fill: false, backgroundColor: '#71B37C', borderColor: '#71B37C', hoverBackgroundColor: '#71B37C', hoverBorderColor: '#71B37C' }, { type:'line', data: [200, 185, 590, 621, 250, 400, 95], fill: false, borderColor: '#EC932F', backgroundColor: '#EC932F', pointBorderColor: '#EC932F', pointBackgroundColor: '#EC932F', pointHoverBackgroundColor: '#EC932F', pointHoverBorderColor: '#EC932F' } ] }; window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); window.myBar = new Chart(ctx, { type: 'bar', data: barChartData, options: { responsive: true, tooltips: { mode: 'label' }, elements: { line: { fill: false } }, scales: { xAxes: [{ display: true, gridLines: { display: false }, labels: { show: true, } }], yAxes: [{ type: "linear", display: true, position: "left", id: "y-axis-1", gridLines:{ display: false }, labels: { show:true, } }, { type: "linear", display: true, position: "right", id: "y-axis-2", gridLines:{ display: false }, labels: { show:true, } }] } } }); }; 

Answer 1

To change the display of a specific graph, you need to edit the configuration of the entire graph.

Deep inside you will find the attributes that you need to change for your specific chart (in your case, a line chart).

---

If you try to find it deeply, you will finally find the x and y attributes for your line chart, stored in myBar.config.data.datasets[2].metaData[i]._model (which was hard to find, I admit).

Then you just need to add this to your code (after generating your myBar ):

 // For each value of your line chart ... for (var i = 0; i < myBar.config.data.datasets[2].metaData.length; i++) { // Get the bar width associated to this value var barWidth = myBar.config.data.datasets[1].metaData[i]._model.width; // Get the percentage that the bar is taking in the graph var barPercentage = myBar.config.options.scales.xAxes[0].barPercentage; // Add the width of the bar / (2*percentage) -- which is the half of the bar myBar.config.data.datasets[2].metaData[i]._model.x += barWidth / (2*barPercentage); // Also edit the controlPointNext and controlPointPrevious to change the bezier curve display myBar.config.data.datasets[2].metaData[i]._model.controlPointNextX += barWidth / (2*barPercentage); myBar.config.data.datasets[2].metaData[i]._model.controlPointPreviousX += barWidth / (2*barPercentage); } 

Check the box for the full code.

---

And here is the final result:

---

Update - Added response:

To make the chart sensitive, you need to achieve a loop inside the Chart.js plugins .

Plugins allow you to handle all the events that are triggered when creating, updating, rendering your schedule.

We will especially edit the afterUpdate event, which is fired every time there is an update (for example, resizing).

 Chart.pluginService.register({ afterUpdate: function(chart) { // Loop in here } }); 

Here is another fiddle with an end result that is responsive.

Note that the histogram is drawn after the line (I don’t know why), so I had to omit the alpha of the background color of the panel.