CODEWITHSUNDEEP
apexcharts
Elia Weiss
Elia Weiss

Reputation: 9915

apexcharts multiple series with different x axis

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?

Upvotes: 2

Views: 6803

Answers (2)

realWorldCoder
realWorldCoder

Reputation: 21

Unfortunately paired numeric values don't create separate x-axes.

Per documentation: https://github.com/apexcharts/apexcharts.js/issues/601, multiple x-axes are not supported.

The only possible current approach is to superimpose to separate charts. Shift the x-axes to prevent these being superimposed with the "offsetY: Number." https://apexcharts.com/docs/options/xaxis/

Upvotes: 0

Elia Weiss
Elia Weiss

Reputation: 9915

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.

Upvotes: 3

Related Questions