chart.js mixed chart with different data points

Question

Trying to create a mixed chart of two bars & one line.
- The data received for the bars is an array of 3 values [each value represents a month]
- The data received for the line is an array of ~90 values [each value represents a day within these 3 months]

My problem is that I can't seem to figure out [assuming it's possible] how to overlap a month worth of values [the days] with one month's value... Instead, what I see is only the first 3 joints of the line.

Tried a lot of things, few examples [cause there aren't too many] but nothing worked for me.

data: {
  labels: ["April","May","June"],
  datasets: [{
     type: 'bar',
     data: [1000, 2000, 3000],
     label: "Bar One",
     backgroundColor: "blue",
     borderWidth: 1
  }, {
     type: 'bar',
     data: [500, 4000, 2500],
     label: "Bar Two",
     backgroundColor: "red",
     borderWidth: 1
  }, {
     type: 'line',
     data: [321, -350, , -361, 244, 231, .... , 548]
     label: "Line",
     borderColor: "green",
     fill: false
}]

This is a general example of the code I'm using. For the sake of this example I didn't include all of the xAxis/yAxis options I've tried because it doesn't seem to work for me at all & the only way I can, at least, to see the start of my line is if I clear those options.

The drawn blue line in the picture represents what I'm trying to accomplish. The blue line at the bottom is what a actually get:

Answer 1

It works if length of data arrays are equals. You have 3 options:

• Decrease line chart data array length to 3 (same as bar charts).
• Extend bar charts data length to length of line chart data array (fill empty items with null ), also for labels array.
• Define new x-axis for line chart.