apexcharts.js
apexcharts.js copied to clipboard
Issue when plotting a mixed line and column chart with different xaxis datasets
Description
I am trying to plot a mixed timeline chart with some columns. My use case is a bit different from the docs examples because my timeline chart does not share the same x values as the columns that I am trying to add to the linechart, so I am passing the timeline series as list paired values instead of a list of Y values and then labels.
My line chart dataset consists of 2-3k points which I pass as list of pairs:
dataset= {name: "lineData", data: [ [1701106078609, 2314], [1701106078720, 2307], [1701106078860, 2312], [1701106078969, 2303], .....}
This works perfectly on its own.
Then I am also trying to add a single column to the chart with this single point dataset:
{ name: "alarm", data: [1701106078718, 2000], type: "column"}
(I use one Y point since I only need the column )
Which does not plot a column, but a single point. Now there are two problems:
- If I add
type: "line"
** to the timeline series ({name: "lineData", data: [...], type: "line"}
), the UI becomes unresponsive, it freezes. - If I want the column instead of the point, I have to add the column series before the timeline series, so:
This plots a column:
series: [{name:"Alarm", data: [[1701108975460, 2378.0]], type:"column"},
{ "Series 1", data: [ [1701108968820, 2282.0], [1701108969009, 2270.0], [1701108969049, 2264.0]...]}
But, If I add the column series after the timeline series, it does not plot a column, it plots a point:
series: [{ "Series 1", data: [ [1701108968820, 2282.0], [1701108969009, 2270.0], [1701108969049, 2264.0]...]},
{name:"Alarm", data: [[1701108975460, 2378.0]], type:"column"}]
I have also tried to add the type: "line" to the chart option, but it doesn't plot the column.
Steps to Reproduce
- Build a timeline chart with series as paired values of [timestamp, YValue]
- Add a one point paired data series of type column
- If added before the timeline series it plots a column. If added after, it plots a point.
- If I specify type: "line" to the timeline series the UI hangs (athough it ends up plotting the timeline and column after a while).
Expected Behavior
Column should be plotted and UI should not hang.
Actual Behavior
UI hangs
Screenshots
Reproduction Link
Point plotted: https://codepen.io/Jorge-KW/pen/zYeLeWY Column plotted: https://codepen.io/Jorge-KW/pen/WNPKPyg
In the end, I just need a way to plot some columns mixed with a timeline chart. I also found that hovering over the columns does not trigger the tooltips.
By the way, what I am doing now is kind of a "hack" to make it work. I am generating a 100 point vertical dataset and adding it to the plot. It has much better performance than adding a sinlge point dataset as type: "column"
Pull request submitted: #4231