How can I fit series with different lengths inside same axis with Apache ECharts?

Question

I am using the Javascript ECharts library for displaying some data in my Angular 2+ app. I see that all the examples have some configuration like the following:

{
  xAxis: [
    data: ['00:00', '01:15', '02:30', '03:45']
  ],
  series: [
   { name: 'A', type: 'line', data: [300, 280, 250, 260] },
   { name: 'B', type: 'line', data: [200, 120, 700, 290] },
  ]
}

But my data does not always provide values for all the labels in the x axis . For example, I would need to fit these arrays of custom objects into the chart:

const series1 = [{ label: '00:00', value: 300 }, { label: '02:30', value: 120 }];
const series2 = [{ label: '03:45', value: 890} ];

Of course, I could manually insert null or empty values in all the series so that all of them provide a value for each label in the axis. But I believe there should be a more straightforward way to achieve this in ECharts, as it is quite simple in other chart libraries like Kendo Charts.

Answer 1

Assuming you are working with line chart, below is the solution, anyway it is not that different for other charts, just make sure your xAxis type is category Your xAxis type should be set to category, and data should be something like this

  xAxis: [
    type: 'category'
    data: [ {name: '00:00'}, ....] 
  ]

your series data should look like this

                   //dimx , value
const series2 = [['03:45',  890]];