score:9

Accepted answer

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>


Related Query

More Query from same tag