Chartjs-How to make bar charts and scatter dots appear underneath each other?

by

1👍

✅

You can do it on a per-case basis. The problem is that both charts have different xAxis type (linear and category). Also the yAxis labels are of different length.

To solve the problem on the chart from your demo, you can change the options from your scatter chart as follows.

  1. Define option scales.xAxes.offset: true to make it correspond to the default value defined for bar charts.
  2. Add min and max to scales.xAxes.ticks to horizontally adjust the points with the bars. 
scales: {
   xAxes: [{
       offset: true, 
       gridLines: {
         display: false
       },
       ticks: {
         min: -0.2, 
         max: 3.3,

Please have a look at your amended Demo.

Leave a comment