[Chartjs]-Combo Bar Line Chart with Chart.js

by

1👍

✅

Try using the same X-axis for both data sets:

scales: {
  xAxes: [{
    type: "category",
    id: "axis-bar",
  }/* Commenting out the second axis, { 
    type: "time",
    id: "axis-time",
    display: true,
  }, */],
},

Now, we’ll set the line dataset to use this X-axis:

datasets: [{
  label: "Dataset1",
  type: "line",
  backgroundColor: "#0000FF",
  borderColor: "#0000FF",
  borderWidth: 1,
  fill: false,
  xAxisID: "axis-bar",
  data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
},

And here we go:

enter image description here

1👍

The issue is with the ‘xAxisID’ attributes.

You specify the x-axis id as: ‘axis-bar’ but then use a different id when specifying dataset 1 (‘axis-time’), so it’s not being plotted on the same graph.

Just use the same id in the datasets as you specify when defining the scale of the graph and you’ll get both plots on the same chart and thus your desired result.

Leave a comment