Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Donut - Label error when hovering a slice

See original GitHub issue

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!