Chartjs-ChartJs Scatter with Bars

by

0👍

✅

Within a vertical bar chart, individual bars get evenly spread among the available space on the x-axis. Therefore, in order to be in sync with the line chart, the bar chart data array should have the same number of entries. Except for the few bar positions, all these values will be zero. This can be obtained with the following function that is used when the bar data is created. 

function barValue(x) {
    for (let barValue of barValues) {
    if (Math.floor(x) == barValue.x) {
      return barValue.y;
    }
  }
  return 0;
}
...

data: lineValues.map(v => barValue(v.x)),

Please have a look at this Fiddle that illustrates how the problem can be solved.

Leave a comment