apexcharts / apexcharts.js

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

[Dumbbell chart] plotting `null` values at the top of the chart #4458

Open bcldvd opened 4 months ago

bcldvd commented 4 months ago

Description

Steps to Reproduce

  1. Take the basic dumbbell chart demo : https://apexcharts.com/javascript-chart-demos/column-charts/dumbbell-chart/
  2. Change the series to the following:
[
    {
      data: [
        {
          x: '2008',
          y: null
        },
        {
          x: '2009',
          y: [3200, 4100]
        }
      ]
    },
       {
      data: [
        {
          x: '2008',
          y: [2800, 4500]
        }
      ]
    }
  ]

I'm setting the value of y to null, because I'm using multiple series. If I remove 2008 from the first series, then 2008 from the second series gets plotted in 2009 🤯

Expected Behavior

image

Actual Behavior

image

Alternate wrong usecase

If we remove the 2008 from the first series:

[
    {
      data: [
        {
          x: '2009',
          y: [3200, 4100]
        }
      ]
    },
       {
      data: [
        {
          x: '2008',
          y: [2800, 4500]
        }
      ]
    }
  ]

image

The second series gets wrongly plotted against 2009 instead of 2008

Reproduction Link