React Charts - Display chart despite zero values (Equally distribute sections and display colorized chart when all the values are zero)

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. emre-ozgun is looking for an . 。

So react-charts-js-2 by default hides the chart when both values are zero. We're trying to avoid 'No data available' sort of messages or displaying icons that represent no value. What we desire to achieve is to display the chart regardless of whether the values are zero or not, halve the chart (preserve the calculated colors (one primary color and one lightened up color)) and also display the zero values on hover.

Is this achievable?

*This occurs only when BOTH values are zero. (All N values, in my case N === 2)

The desired output when all the values are zero is attached below

import { Pie } from "react-chartjs-2";
import { ArcElement, Chart as ChartJS, Legend, Tooltip } from "chart.js";
ChartJS.register(ArcElement, Tooltip, Legend);


const LimitChart = ({ data, sectorNameBySectorCode }: { data: ISectorLimit, sectorNameBySectorCode: string }) => {

  const { t } = useTranslation();

  const bothZero = !data.remainingLimit && !data.usedLimit;

  const chartData = React.useMemo(() => {
    return {
      labels: [t("label.remainingLimit"), t("label.usedLimit")],
      datasets: [
        {
          data: [data.remainingLimit || 0.1, data.usedLimit || 0.1],
          backgroundColor: [
            chartColorLookup[sectorNameBySectorCode as SectorNames].secondary,
            chartColorLookup[sectorNameBySectorCode as SectorNames].primary
          ],
          borderWidth: 2,
        },
      ],
    };
  }, [data]);

  return (
    <Pie data={chartData} width={200} height={200}/>
  );
};

Answer 1

Conditionally rendering super small values resolved my issue.

  const bothZero = !data.remainingLimit && !data.usedLimit
  const conditionalData = bothZero
    ? [1e-10, 1e-10]
    : [data.remainingLimit, data.usedLimit];

  const chartData = React.useMemo(() => {
    return {
      labels: [t("label.remainingLimit"), t("label.usedLimit")],
      datasets: [
        {
          data: conditionalData,
          backgroundColor: [secondary, primary],
          hoverBackgroundColor: [secondary, primary],
          borderWidth: 4,
        },
      ],
    };
  }, [data]);