search

Kyvis-Labs / ignition-apexcharts-module

The module provides Perspective ApexCharts components
Apache License 2.0
59 stars 12 forks source link

Area chart does not accept 'null' values for discontinuities #53

Open cornedejonge opened 8 months ago

cornedejonge commented 8 months ago

When using ApexCharts to render line charts, null values in the data series create breaks or gaps in the chart, allowing for the visualization of discontinuous data series. However, when switching the chart type to an area chart with the same data series (containing null values for intended breaks), the chart renders as a continuous line, ignoring the null values and not showing the expected breaks or gaps.

According to the documentation of ApexCharts, using null values for breaks or gaps should work with both the line and area chart. https://apexcharts.com/javascript-chart-demos/area-charts/chart-with-missing-data-or-null-values/

Area chart fails to display gaps for null values, showing a continuous line instead: image

Line chart correctly shows breaks where null values are present: image

traviscox commented 6 months ago

I wasn't able to replicate this issue. I was able to create an area line with breaks. Here is my config:

type area

options { "chart": { "height": 350, "stacked": false, "toolbar": { "show": true }, "type": "line" }, "dataLabels": { "enabled": false }, "fill": { "opacity": 1 }, "markers": { "size": 0 }, "stroke": { "width": 3 }, "xaxis": { "type": "datetime" }, "yaxis": { "labels": { "formatter": "function (val) { return val.toFixed(2); }" } } }

series [ { "data": [ { "x": 1698098270040, "y": 92.31973208860755 }, { "x": 1698098285040, "y": 98.83574167869062 }, { "x": 1698098300040, "y": 99.40744245366106 }, { "x": 1698098315040, "y": 99.66981950013765 }, { "x": 1698098330040, "y": 100.09892017618496 }, { "x": 1698098345040, "y": null }, { "x": 1698098360040, "y": 93.34921995339401 }, { "x": 1698098375040, "y": 92.79367299375417 }, { "x": 1698098390040, "y": 96.63583224666358 }, { "x": 1698098405040, "y": 98.19833138153473 }, { "x": 1698098420040, "y": 99.3663180104998 }, { "x": 1698098435040, "y": 99.58241316401697 }, { "x": 1698098450040, "y": 99.96153788007325 }, { "x": 1698098465040, "y": 99.82900750014512 }, { "x": 1698098480040, "y": 99.83112520906994 }, { "x": 1698098495040, "y": 99.85872443002602 }, { "x": 1698098510040, "y": 100.1508205345365 }, { "x": 1698098525040, "y": 99.96632714360595 }, { "x": 1698098540040, "y": 100.12634413881872 }, { "x": 1698098555040, "y": 99.84604752053646 } ] } ]

image

Can you post your example?