Chart.js
Chart.js copied to clipboard
chartjs
Stacking area line charts with different x-values in data
Expected behavior
As shown in this sreenshot, we woud like the area chart can be stacked correctly even the x-value are random/mis-match.
For example, in Series A, there is a data [x: "2022-06-27T21:00:00Z", y : 25], but no data point at this timestamp in Series B. we want the area chart can still be stacked with auto-fill [x: "2022-06-27T21:00:00Z", y : 0] in Series B and stacked?
Current behavior
We use the "react-chartjs-2": "^4.0.1" and "chart.js": "^3.7.1", to build area charts in our service. Our chart will display logs information which is time-based data like, {x:"2022-06-27T21:00:00Z", y:25}.
Since the time could be a random value in each data point, so there are some issue when we want to display a few series with different X-values(different time), as shown in the image. We got overlapping and blank area when the X-value(timestamp) is missing in another series.
Update: checked this Issue: https://github.com/chartjs/Chart.js/issues/7695. I notice they did have some missing/ different X-value. but looks the x-value is not random. when I made the x-values mis-match. same issue: https://codepen.io/derrickwanglf/pen/RwMRMXM
TO Simply demonstrate our issue, I mock some data(real number as x-value) here.
https://codepen.io/derrickwanglf/pen/gOeMvEL
Do you know how can we stack the area chart even the x-values are random?
Reproducible sample
https://codepen.io/derrickwanglf/pen/gOeMvEL
Optional extra steps/info to reproduce
No response
Possible solution
For example, in Series A, there is a data [x: "2022-06-27T21:00:00Z", y : 25], but no data point at this timestamp in Series B. we want the area chart can still be stacked with auto-fill [x: "2022-06-27T21:00:00Z", y : 0] in Series B and stacked?
Context
No response
chart.js version
3.7.1
Browser name and version
No response
Link to your project
No response
This is a tough one because we'd have to interpolate the dataset below which becomes quite complicated once Bezier curves are involved (i.e. tension !== 0).
It feels like a solution to this would be to normalize all of the data points before sending them to the chart for rendering. This could probably be accomplished using a custom plugin. Essentially, you'd loop through all data of all datasets to find the unique X coordinates, then for each dataset add in an interpolated point for each X coordinate not in the dataset.
This is a tough one because we'd have to interpolate the dataset below which becomes quite complicated once Bezier curves are involved (i.e. tension !== 0).
It feels like a solution to this would be to normalize all of the data points before sending them to the chart for rendering. This could probably be accomplished using a custom plugin. Essentially, you'd loop through all data of all datasets to find the unique X coordinates, then for each dataset add in an interpolated point for each X coordinate not in the dataset.
We actually have the interpolation in a method already, so should not be that complicated. Just need to use interpolate in the stack calculation for all datasets. The control points need to be updated though. And I could be missing something, as always :)
