apexcharts / vue3-apexcharts

📊 Vue-3 component for ApexCharts
MIT License
314 stars 35 forks source link

Marker not visible for some decimal numbers #93

Closed sasokovacic closed 9 months ago

sasokovacic commented 9 months ago

Hi,

I have a weird problem. Marker is not visible for some small decimal numbers (like 0.2) but for some (like 0.3) it is. It becomes visible once I hover it. What is even weirder is that the marker is visible for 0.2 if I remove min: 0. But I need to start from 0 since sometimes I show really high numbers like 1 000 000 000.

Here is the code

<apexchart width="500" type="line" :options="chartOptions" :series="series"></apexchart>
            chartOptions: {
                chart: {
                    height: 350,
                    type: 'line',
                    zoom: {
                        enabled: false
                    }
                },
                grid: {
                    borderColor: '#e7e7e7',
                    row: {
                        colors: ['#f3f3f3', 'transparent'],
                        opacity: 0.5
                    },
                },
                markers: {
                    size: 5
                },
                xaxis: {
                    type: 'datetime',
                },
                yaxis: {
                    min: 0,
                    showForNullSeries: false,
                    decimalsInFloat: 3,
                    labels: {
                        formatter: value => formatDecimal(value, 3)
                    }
                },
            },
            // Series data
            series: [
                {
                    "name": "category 1",
                    "data": [
                        [
                            1684301087000,
                            0.2 // marker not visible except if min:0 is removed
                            // 0.3 // marker is visible in any case 
                        ]
                    ]
                }
            ],

This function is used for formatting labels

function formatDecimal (value, decimalPlaces) {
    decimalPlaces = isNaN(decimalPlaces) ? 2 : decimalPlaces
    if (decimalPlaces === 0) {
        return formatInteger(value)
    }
    return new Intl.NumberFormat("sl-SI", { style: "decimal", maximumFractionDigits: decimalPlaces, minimumFractionDigits: decimalPlaces }).format(value).replace(/\u2212/g, '-')
}

image

image

image

image

sasokovacic commented 9 months ago

It seems it was solved with the latest version of apexcharts package