Donut - Label error when hovering a slice

[ortigozamatias]

Hi! I'm getting this error when the cursor leaves a slice:

Uncaught TypeError: Cannot read property 'style' of null
at Pie.revertDataLabelsInner (apexcharts.esm.js:8392)

import React, { memo } from 'react';
import Chart from 'react-apexcharts';
import styles from './pieChart.module.scss';

export default memo(function PieChart() {
    const chartOptions = {
        options: {
            dataLabels: {
                enabled: false
            },
            colors: ['#C7F464', '#662E9B', '#E2C044', '#C4BBAF'],
            fill: {
                type: 'gradient',
            },
            labels: ['Voice mail', 'Recordings', 'System', 'Free'],
            legend: {
                formatter: (_, opts) => chartOptions.labels[opts.seriesIndex],
                itemMargin: {
                    horizontal: 5,
                    vertical: 10
                },
                position: 'bottom',
                floating: true,
                offsetY: -15
            },
            plotOptions: {
                pie: {
                    expandOnClick: false
                }
            },
            tooltip: {
                enabled: true
            }
        },
        series: [44, 55, 41, 17],
        labels: ['Voice mail', 'Recordings', 'System', 'Free']
    };

    return (
        <div className={styles.container}>
            <Chart options={chartOptions.options} series={chartOptions.series} type="donut" />
        </div>
    );
});

In the function revertDataLabelsInner you search for all the elements that have .apexcharts-datalabels-group class, getting null as result. When comparing that in line 8391 you enter the condition even though dataLabelsGroup is null.

However, I've tried to reproduce the situation in https://codesandbox.io/s/m380n2nomj and nothing happens, it works perfectly.

Hope you can help me, thanks!

[junedchhipa]

Thanks for the detailed report. I will fix it soon.

[lulumalik]

hello, find a same error at simple pie chart, im using that in vue

[junedchhipa]

Which version of apexcharts are you using @lulumalik ?

[xomin70]

Hello, I have the same problem in a pie chart mounted on vue.

File apexcharts.esm.js => function revertDataLabelsInner(el, dataLabelsConfig) => lines 8423 - 8447

• Line 8438:

} else if (w.globals.selectedDataPoints.length && w.globals.selectedDataPoints[0].length === 0) {

Changed:

} else if (w.globals.selectedDataPoints.length && w.globals.selectedDataPoints[0].length === 0 && dataLabelsGroup && dataLabelsGroup.style) {

• Line 8442:

if (dataLabelsGroup !== null && w.globals.series.length > 1) {

Changed:

if (dataLabelsGroup !== null && w.globals.series.length > 1 && dataLabelsGroup && dataLabelsGroup.style) {

[junedchhipa]

Thanks, @xomin70
Added the check.

[pavan-singh-iphtech]

I am facing issue when i hover on labels then it throw error
` const pieChartOptions = {
hover: {mode: null},
chart: {
type: "pie",
height: "270px",
},
labels: ["Bank", "Cash", "Card", "Cheque", "UPI"],
series: invoiceData?.data
? [
invoiceData.data
.filter((item) => item.payment_mode === "Bank")
.reduce((acc, item) => acc + item?.total_amount, 0),
invoiceData.data
.filter((item) => item.payment_mode === "Cash")
.reduce((acc, item) => acc + item?.total_amount, 0),
invoiceData.data
.filter((item) => item.payment_mode === "Card")
.reduce((acc, item) => acc + item?.total_amount, 0),
invoiceData.data
.filter((item) => item.payment_mode === "Cheque")
.reduce((acc, item) => acc + item?.total_amount, 0),
invoiceData.data
.filter((item) => item.payment_mode === "UPI")
.reduce((acc, item) => acc + item?.total_amount, 0),
]
: [0, 0, 0, 0],
dataLabels: {
position: "center",
},
tooltip: {
enabled: true,

  y: {
    formatter: function (val) {
      return `₹${val?.toFixed(2)}`;
    },
  },
},
legend: {
  position: "bottom",
},
colors: ["#3a8dde", "#1dd0bb", "#fd5631", "#01a9d7", "#f17c3a"],

};
`