[Bug]: Uncaught (in promise) rejection from DonutChart

[AndersRobstad]

Application/Team

Kvist

What happened?

When loading a page with one DonutChart-component we are getting two errors as such in the console:

Version

@carbon/charts-svelte: ^1.15.3

Data & options used

options={{
                resizable: true,
                toolbar: { enabled: false },
                pie: { labels: { enabled: false }, valueMapsTo: 'percentagePoints' },
                donut: {
                    alignment: Alignments.CENTER,
                    center: {
                        numberFontSize() {
                            return 36;
                        },
                        label: classificationName,
                        numberFormatter(value) {
                            return `${value.toFixed(1)}%`;
                        }
                    }
                },
                tooltip: {
                    valueFormatter(value) {
                        return `${value.toFixed(1)}%`;
                    },
                    truncation: {
                        numCharacter: 100
                    }
                },
                legend: {
                    truncation: {
                        threshold: 1000
                    }
                }
            }}

data= [
    {
        "group": "Ledelse",
        "percentagePoints": 7.428571428571428
    },
    {
        "group": "Helse og innemiljø",
        "percentagePoints": 2.526315789473684
    },
    {
        "group": "Energi",
        "percentagePoints": 2.9166666666666674
    },
    {
        "group": "Transport",
        "percentagePoints": 10
    },
    {
        "group": "Vann",
        "percentagePoints": 3.5555555555555554
    },
    {
        "group": "Materialer",
        "percentagePoints": 15.3
    },
    {
        "group": "Avfall",
        "percentagePoints": 7.000000000000001
    },
    {
        "group": "Arealbruk og økologi",
        "percentagePoints": 15
    },
    {
        "group": "Forurensing",
        "percentagePoints": 2.857142857142857
    },
    {
        "group": "Innovasjon",
        "percentagePoints": 1
    }
]

Relevant log output

No response

StackBlitz example

No response

What priority level would this be in your opinion?

P2

[markchou0225]

Thank you for reporting this issue @AndersRobstad. I think it's caused by my change: https://github.com/carbon-design-system/carbon-charts/pull/1771. I'll look into this and deliver a fix asap.

[markchou0225]

PR submitted, confirmed it should impact versions in 1.14.8 - 1.15.3(latest).

[justinschmidt-ventum]

I still seem to have the same bug on @carbon/charts-react@1.15.7 on both donut and pie charts.

[markchou0225]

Hi @justinschmidt-ventum,

Thanks for reporting this. Could you provide Options and sample data that could re-produce this issue via storybook like below? https://charts.carbondesignsystem.com/?path=/story/simple-charts-donut--donut&args=options.height:500px

It would help me for trouble-shoot, thanks.

[justinschmidt-ventum]

Hi @markchou0225,

    <DonutChart
      data={[
        { group: t('survey.step9.directemissions.title'), value: formState.calculatedEmissionsDirectPerTonne },
        { group: t('survey.step9.indirectemissions.title'), value: formState.calculatedEmissionsIndirectPerTonne },
      ]}
      options={{
        title: 'Total Emissions',
        resizable: true,
        donut: {
          center: {
            label: 't CO2e / tp'
          },
          alignment: 'center'
        },
        height: '300px'
      }}
    />

    The same error also happens when the value is set to something like 10 and 20 directly in the code instead of using formstate, same with the group name being set directly in the code. Interestingly, when my formstate was empty due to a bug and no data was passed to the chart, I didn't get any error messages.

[justinschmidt-ventum]

Hi @markchou0225 did you find anything?