Reply To: Anyone familiar with: Charts?

[Markov]

Hi,

A pie chart can show percentages inside the slices. For this purpose you can use the formatFunction for this purpose.

Please, look at the sample code below:

const data = [
    { Category: 'A', Value: 30 },
    { Category: 'B', Value: 50 },
    { Category: 'C', Value: 20 }
  ];

  const chart = new window.Smart.Chart('#chart', {
    caption: "Pie Chart with Percentages",
    description: "Smart Chart - Pie example",
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    dataSource: data,
    seriesGroups: [
      {
        type: 'pie',
        showLabels: true,
        series: [
          {
            dataField: 'Value',
            displayText: 'Category',
            // Format label to show percentage
            formatFunction: function (value, itemIndex, serie, group) {
              const total = data.reduce((sum, d) => sum + d.Value, 0);
              const percent = (value / total * 100).toFixed(1) + '%';
              return percent;
            }
          }
        ]
      }
    ]
  });

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/