AG Charts pie chart is not shown correctly

[benediktbrenk]

Problem

AG Charts pie chart is not shown correctly in localhost environment, but not in Vercel deployment. Screenshots:

Localhost:

Vercel:

Code for filter function and Chart

filter:

function getCategoryTotalAmount(category) {
return filteredTransactions
.filter(
(filteredTransaction) => filteredTransaction.category === category.name,
)
.reduce(
(total, filteredTransaction) => total + filteredTransaction.amount,
0,
);
}

const data = filter.categories.map((category) => ({
category: category.name,
amount: Number.parseFloat(getCategoryTotalAmount(category).toFixed(2)),
color: category.color,
}));

Chart:

import { AgChartsReact } from "ag-charts-react";
import { useEffect, useState } from "react";
import * as Styled from "./PieChart.styled";

export function PieChart({ chartData }) {
const options = {
legend: { enabled: false },
series: [
{
type: "pie",
angleKey: "amount",
calloutLabelKey: "category",
calloutLabel: { enabled: true },
label: {
fontSize: 8,
},
calloutLine: {
colors: chartData.map((category) => category.color),
},
fills: chartData.map((category) => category.color),
},
],
data: chartData,
};

return (
<Styled.PieContainer>

</Styled.PieContainer>
);
}

Link to repo

For a better overview see our budget-app repo here (branch redesign-report-page): https://github.com/benediktbrenk/budget-app/tree/redesign-report-page

[onemanwenttomow]

I am not sure what the answer is. But there a couple of things that might be worth trying.

There is currently a warning in the console.

AG Charts - unable to set [label] in dJ - property is unknown

It might be worth looking closer at options object, and comparing that to what the documentation expects.

Also, I don't think we need to have a useEffect here. Instead we could use derived state.

import { AgChartsReact } from "ag-charts-react";
import * as Styled from "./PieChart.styled";

export function PieChart({ chartData }) {
  // We directly derive chartOptions from chartData without using useState.
  const chartOptions = {
    legend: { enabled: false },
    series: [
      {
        type: "pie",
        angleKey: "amount",
        calloutLabelKey: "category",
        calloutLabel: { enabled: true },
        label: {
          fontSize: 8,
        },
        calloutLine: {
          colors: chartData.map((category) => category.color),
        },
        fills: chartData.map((category) => category.color),
      },
    ],
    data: chartData,
  };

  return (
    <Styled.PieContainer>
      <AgChartsReact options={chartOptions} />
    </Styled.PieContainer>
  );
}