apexcharts / react-apexcharts

📊 React Component for ApexCharts
https://apexcharts.com
MIT License
1.31k stars 159 forks source link

Bar chart data point missing when there is only one entry in data #615

Open jknezevic1712 opened 4 months ago

jknezevic1712 commented 4 months ago

Hello,

I may have encountered a bug with bar chart (I'm using version 1.4.1). So, I have data that is of number[] type and I noticed that when I have only one entry in data array, bar chart doesn't show anything. Interestingly, area chart does show the data point as it should. (I use same options config for both types as it can be seen from the example below)

However, I managed to find a workaround by adding xaxis property with one empty string category defined in it.

Not sure if this is a bug or me not defining the options correctly, but I wanted to let you know about this.

Here's a data example:

const data = [
    {
        "name": "series-1",
        "data": [
            26,
            25,
            25
        ],
        "tooltipInformation": [
            {
                "tooltipName": "#Processes",
                "createdAt": "2024-07-03T09:22:06.224925+02:00"
            },
            {
                "tooltipName": "#Processes",
                "createdAt": "2024-07-03T14:36:16.639229+02:00"
            },
            {
                "tooltipName": "#Processes",
                "createdAt": "2024-07-03T14:36:56.676113+02:00"
            }
        ],
        "group": "apexcharts-axis-0"
    }
];

And here is an options object I provided to both chart types:

const options = {
    "height": 120,
    "options": {
        "chart": {
            "id": "#Processes-chart",
            "sparkline": {
                "enabled": true
            }
        },
        "dataLabels": {
            "enabled": false
        },
        "fill": {
            "type": "solid",
            "opacity": 0.3
        },
        "markers": {
            "size": 4,
            "strokeWidth": 2,
            "hover": {
                "size": 6
            },
            "showNullDataPoints": true
        },
        "stroke": {
            "curve": "straight",
            "width": 3
        },
        "tooltip": {},
        "colors": [
            "#7c4dff",
            "#2196f3",
            "#f44336"
        ],
        "plotOptions": {
            "bar": {
                "borderRadius": 5
            }
        },
        "xaxis": {
            "categories": [""],
            "convertedCatToNumeric": false
        }
    }
};

That being said, I could've been configuring charts wrongly so if that's the case, please let me know!