Issue with Donut Chart - Data Label Total Percentage is 100.1%

[Madhusree]

Hi All,

I am using Donut Chart from VizFrame Charts to display the statuses of the system. By default, I have enabled to display data label, which will show the percentage of each status against total records. When I have tried to add up the percentage of all the statuses, it comes as 100.1%. Attaching the screenshot for reference. In the screenshot, total percentage is 35.5% + 32.3% + 32.3% = 100.1%. Is there any workaround to show as 36% + 32% + 32% = 100%

Can someone help me on how to go approach this issue?

Thanks,

Madhu

[yogananda]

madhusree.c

The reason why the percentages in your donut chart add up to 100.1% is because the data labels are rounded to two decimal places. If you round the percentages to one decimal place, the total will be 100%.

To do this, you can use the following code:

var donutChart = new VizFrame.DonutChart({
  ...
  dataLabels: {
    enabled: true,
    formatter: function(value) {
      return value.toFixed(1);
    }
  }
});

This code will round the percentages in the data labels to one decimal place.

You can also use the following code to round the percentages in the donut chart itself:

var donutChart = new VizFrame.DonutChart({
  ...
  values: [35.5, 32.3, 32.3],
  donutStyle: {
    innerRadius: 0.7,
    valueFormatter: function(value) {
      return value.toFixed(1);
    }
  }
});

This code will round the percentages in the donut chart itself to one decimal place.

Once you have made these changes, the percentages in your donut chart will add up to 100%.

[Madhusree]

Hi yoganandamuthaiah,

Thanks for your response. I am having Donut Chart Configuration as follows, and I am seeing only formatString option not formatter under vizProperties.plotArea.dataLabel. Can you please help me on this,

settingsModel: {
    name: "Donut",
        vizType: "donut",
            value: ["Records"],
                dataset: {
        dimensions: [
            {
                name: "Status",
                value: "{Status}"
            }
        ],
            measures: [
                {
                    name: "Records",
                    value: "{Records}"
                }
            ],
                data: {
            path: "/values"
        }
    },
    vizProperties: {
        title: {
            visible: false
        },
        legend: {
            visible: true
        },
        legendGroup: {
            layout: {
                position: "right",
                    alignment: "center",
                        fontSize: "24px"
            }
        },
        plotArea: {
            dataLabel: {
                visible: true
            },
            dataPointStyle: {
                rules:
                [
                ]
            }
        }
    }
}