Added labelformatter function for piechart labels

components/chart/heatmap/heatmap-chart.props.ts

@@ -28,6 +28,10 @@ export interface HeatmapChartProps extends CommonChartProps {
   data: HeatmapDataPoint[];
   /** When true, shows the numeric value on each cell. @default false */
   showLabel?: boolean;
+  /**
+   * ECharts heatmap label formatter, passed straight through to the series' `label.formatter`
+   */
+  labelFormatter?: (params: any) => string;
   /** Whether to emphasize the hovered cell. @default true */
   showHighlighter?: boolean;
   /** Whether to show the X-axis line and category labels. @default true */

components/chart/heatmap/heatmap-chart.tsx

@@ -39,6 +39,7 @@ const ChartComponent = ({
   width = 320,
   height = 300,
   showLabel = false,
+  labelFormatter,
   showXAxis = true,
   showYAxis = true,
   showHighlighter = true,
@@ -171,6 +172,7 @@ const ChartComponent = ({
       label: {
         show: showLabel,
         color: theme.legend.textColor,
+        ...(labelFormatter ? { formatter: labelFormatter } : {}),
       },
       emphasis: showHighlighter
         ? {
@@ -205,6 +207,7 @@ const ChartComponent = ({
     normalizedData,
     theme,
     showLabel,
+    labelFormatter,
     showXAxis,
     showYAxis,
     showHighlighter,

components/chart/pie/pie-chart.props.ts

@@ -99,6 +99,10 @@ export interface PieChartProps extends CommonChartProps {
    * @default true when labelPosition is 'outside'
    */
   showLabelLine?: boolean;
+  /**
+   * ECharts pie label formatter, passed straight through to the series' `label.formatter`
+   */
+  labelFormatter?: (params: any) => string;
   /**
    * Whether to emphasize (scale/highlight) the hovered slice.
    * @default true

components/chart/pie/pie-chart.tsx

@@ -48,6 +48,7 @@ const ChartComponent = ({
   showLabel = true,
   labelPosition = 'outside',
   showLabelLine = true,
+  labelFormatter,
   showHighlighter = true,
   tooltip = 'card',
   renderTooltip,
@@ -112,14 +113,15 @@ const ChartComponent = ({
       seriesCenter?: [string, string]
     ): any => {
       const total = pieData.reduce((sum, d) => sum + d.value, 0);
+      const defaultFormatter = (params: any) => {
+        const pct = total > 0 ? ((params.value / total) * 100).toFixed(1) : '0';
+        return `${params.name}\n${pct}%`;
+      };
       const labelConfig: any = showLabel
         ? {
             show: true,
             position: labelPosition,
-            formatter: (params: any) => {
-              const pct = total > 0 ? ((params.value / total) * 100).toFixed(1) : '0';
-              return `${params.name}\n${pct}%`;
-            },
+            formatter: labelFormatter ?? defaultFormatter,
             ...labelStyle,
           }
         : { show: false };
@@ -237,6 +239,7 @@ const ChartComponent = ({
     showLabel,
     labelPosition,
     showLabelLine,
+    labelFormatter,
     showHighlighter,
     tooltipOverlayActive,
     theme,

stories/heatmap/heatmap.args.ts

@@ -20,6 +20,10 @@ const heatmapOnlyArgTypes = {
     control: 'boolean',
     description: 'When true, shows the numeric value on each cell. Default: false',
   },
+  labelFormatter: {
+    control: false,
+    description: 'Formatter for heatmap cell labels. ({ value: [xIndex, yIndex, value], dataIndex, seriesName? }) => string',
+  },
   showXAxis: {
     control: 'boolean',
     description: 'Whether to show the X-axis labels. Default: true',

stories/heatmap/labels/heatmap.labels.stories.tsx

@@ -14,3 +14,12 @@ export const Default: Story = {
 export const WithCellLabels: Story = {
   args: { ...heatmapBaseArgs, showLabel: true },
 };
+
+/** Custom formatter: prefix the value. */
+export const CustomFormatter: Story = {
+  args: {
+    ...heatmapBaseArgs,
+    showLabel: true,
+    labelFormatter: (params: any) => `${params.value[2]}°`,
+  },
+};

stories/pie/label/pie.label.stories.tsx

@@ -49,3 +49,34 @@ export const NoLabels: Story = {
     showLabel: false,
   },
 };
+
+/** Custom formatter: show only the slice name. */
+export const CustomFormatterName: Story = {
+  args: {
+    data,
+    showLabel: true,
+    labelPosition: 'outside',
+    labelFormatter: (params: any) => params.name,
+  },
+};
+
+/** Custom formatter: show the raw value instead of percent. */
+export const CustomFormatterValue: Story = {
+  args: {
+    data,
+    showLabel: true,
+    labelPosition: 'outside',
+    labelFormatter: (params: any) => `${params.name}: ${params.value}`,
+  },
+};
+
+/** Custom formatter: name and value on one line, inside the slice. */
+export const CustomFormatterInside: Story = {
+  args: {
+    data,
+    showLabel: true,
+    labelPosition: 'inside',
+    showLabelLine: false,
+    labelFormatter: (params: any) => `${params.name} (${params.value})`,
+  },
+};

stories/pie/pie.args.ts

@@ -32,6 +32,10 @@ const pieOnlyArgTypes = {
     control: 'boolean',
     description: 'Whether to show label lines (connectors). Default: true when labels outside',
   },
+  labelFormatter: {
+    control: false,
+    description: 'Formatter for pie slice labels. ({ name, value, percent, dataIndex, seriesName? }) => string',
+  },
   tooltip: {
     control: 'select',
     options: ['card', 'compact', 'kpi', 'striped', 'none'],