apexcharts.js icon indicating copy to clipboard operation
apexcharts.js copied to clipboard

Issue when plotting a mixed line and column chart with different xaxis datasets

Open DespuesLeeWallace opened this issue 1 year ago • 2 comments

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:

  1. If I add type: "line"** to the timeline series ({name: "lineData", data: [...], type: "line"}), the UI becomes unresponsive, it freezes.
  2. 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

  1. Build a timeline chart with series as paired values of [timestamp, YValue]
  2. Add a one point paired data series of type column
  3. If added before the timeline series it plots a column. If added after, it plots a point.
  4. 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

apexch

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.

DespuesLeeWallace avatar Nov 28 '23 10:11 DespuesLeeWallace

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"

DespuesLeeWallace avatar Nov 28 '23 10:11 DespuesLeeWallace

Pull request submitted: #4231

rosco54 avatar Feb 13 '24 06:02 rosco54