apexcharts multiple series with different x axis

user_1406269 0
Viewed 2186

We use https://apexcharts.com/docs/chart-types/multiple-yaxis-scales/

but we need each line to have different x values, i.e. we display Weight measurement result, but some of the result are discarded, so they should not be part of the line chart, but we still want them to appear on the chart (preferably as separated greyed dots)

So Y data is:

[
  {
    "name": "Weight",
    "data": [200, null, 119]
  },
  {
    "name": "Discarded",
    "data": [null,19,null]
  }
]

And X data is:

[1626009960000,1627075098000,1627186269000]

This result in the following chart:

enter image description here

i.e. the Weight dots are not connected to a line

If I remove the null values form the Y, I get the following chart

enter image description here

i.e. the Weight dots are connected, but with wrong dates

How can I create multiple series with different x axis?

apexcharts
1 Answers

See https://apexcharts.com/docs/series/

Paired values

Numeric Paired Values in two-dimensional array

series: [{
  data: [[1, 34], [3, 54], [5, 23] , ... , [15, 43]]
}], 
xaxis: {
  type: 'numeric'
}

where the 1st index is the x axes value and the 2nd index is the y axes value. Make sure to set the xaxis type to numeric as shown above.

user_14062690
Related