Chart js - Get bar width after render

Question

I need to get the bar width in pixels and use it in my chart js settings for the pointRadius: {{barwidth}} of the overlapping line graph. My chart is also set to responsive so i'd need to update this value if the window was to be resized.

I am stumped. And could really use some help.

See the line on each bar

that is a line chart with the pointStyle: 'line' set so i can have this effect. Now i need to set the width of that line to the bar with pointRadius: {{barwidth}}

Answer 1

Usually you can use getDatasetMeta() method of the chart to get bar width.

However, if you were to change/update the point-radius of the line graph dynamically (on window resize), you would have to use a chart plugin, as such :

Chart.plugins.register({
   updated: false,
   beforeDraw: function(chart) {
      var barWidth = chart.getDatasetMeta(1).data[0]._model.width;
      var line = chart.data.datasets[0];
      line.pointRadius = barWidth / 2;
      line.pointHoverRadius = barWidth / 2;
      if (!this.updated) {
         chart.update();
         this.updated = true;
      }
   }
});

^{* add this at the beginning of your script}

ᴅᴇᴍᴏ ⧩

 Chart.plugins.register({ updated: false, beforeDraw: function(chart) { var barWidth = chart.getDatasetMeta(1 /* dataset-index of bar graph */).data[0]._model.width; var line = chart.data.datasets[0 /* dataset-index of line graph */]; line.pointRadius = barWidth / 2; line.pointHoverRadius = barWidth / 2; // update chart at first render with newly added values if (!this.updated) { chart.update(); this.updated = true; } } }); var chart = new Chart(ctx, { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [{ type: 'line', label: 'LINE', data: [3, 1, 4, 2, 5], backgroundColor: 'rgba(0, 119, 290, 0.5)', borderColor: 'transparent', pointBorderColor: '#07C', fill: false, pointStyle: 'line' }, { label: 'BAR', data: [3, 1, 4, 2, 5], backgroundColor: 'rgba(4, 142, 128, 0.5)' }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="ctx"></canvas>