apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.26k stars 1.29k forks source link

Missing null values at line chart #3641

Open AitorMihashi opened 1 year ago

AitorMihashi commented 1 year ago

Description

The scatter dot dissapears when moving the cursor over the chart

Steps to Reproduce

  1. Open this URL
  2. Go to the chart and move around
  3. You will see that the green point at X:4, Y:12 dissapears and move to the point where you leave the chart

Expected Behavior

The green scatter point stays at it´s position even when you move your mouse over the chart.

Actual Behavior

The scatter green point is dragged and dropped at a X point when you go out of the chart

Screenshots

Chart when you load the page image

Chart when you move the mouse over image

Reproduction Link

https://apexcharts.com/javascript-chart-demos/line-charts/null-values/

Guziq commented 6 days ago

I've also noticed that, for some data points, the dots disappear completely. For example, this works fine:

{
  name: 'Peter',
  data: [null, 2000, null, 2000, null, 2000, null, 2000, null, 2000, null, null, null, 2000, null, null, 40, null],
}

However, when I replace the value 40 with null in the following dataset:

{
  name: 'Peter',
  data: [null, 2000, null, 2000, null, 2000, null, 2000, null, 351, null, null, null, 2000, null, null, null, null],
}

The graph disappears completely.

I found that setting:

stroke: {
    curve: 'monotoneCubic',
},

Fix all the issues.