From 2d80ce0fd8c71aee948a528595000b05430a9aa7 Mon Sep 17 00:00:00 2001 From: hmonika Date: Thu, 23 Jul 2026 14:54:36 +0530 Subject: [PATCH 1/2] Added labelformatter function for piechart labels --- components/chart/pie/pie-chart.props.ts | 4 ++++ components/chart/pie/pie-chart.tsx | 11 +++++++---- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/components/chart/pie/pie-chart.props.ts b/components/chart/pie/pie-chart.props.ts index 7df30f1..5fe1375 100644 --- a/components/chart/pie/pie-chart.props.ts +++ b/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 diff --git a/components/chart/pie/pie-chart.tsx b/components/chart/pie/pie-chart.tsx index 9a0432a..b8b1222 100644 --- a/components/chart/pie/pie-chart.tsx +++ b/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, From 9655f1ec2fe524182ee36a78884af2f9b103d8cc Mon Sep 17 00:00:00 2001 From: hmonika Date: Thu, 23 Jul 2026 16:04:16 +0530 Subject: [PATCH 2/2] Added labelformatter prop and in stories as well for heatmap and piechart --- .../chart/heatmap/heatmap-chart.props.ts | 4 +++ components/chart/heatmap/heatmap-chart.tsx | 3 ++ stories/heatmap/heatmap.args.ts | 4 +++ .../heatmap/labels/heatmap.labels.stories.tsx | 9 ++++++ stories/pie/label/pie.label.stories.tsx | 31 +++++++++++++++++++ stories/pie/pie.args.ts | 4 +++ 6 files changed, 55 insertions(+) diff --git a/components/chart/heatmap/heatmap-chart.props.ts b/components/chart/heatmap/heatmap-chart.props.ts index c1c1003..9e4a54c 100644 --- a/components/chart/heatmap/heatmap-chart.props.ts +++ b/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 */ diff --git a/components/chart/heatmap/heatmap-chart.tsx b/components/chart/heatmap/heatmap-chart.tsx index 99812e4..09f2f5d 100644 --- a/components/chart/heatmap/heatmap-chart.tsx +++ b/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, diff --git a/stories/heatmap/heatmap.args.ts b/stories/heatmap/heatmap.args.ts index 0fccb07..5dbba15 100644 --- a/stories/heatmap/heatmap.args.ts +++ b/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', diff --git a/stories/heatmap/labels/heatmap.labels.stories.tsx b/stories/heatmap/labels/heatmap.labels.stories.tsx index 746917c..291dfe1 100644 --- a/stories/heatmap/labels/heatmap.labels.stories.tsx +++ b/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]}°`, + }, +}; diff --git a/stories/pie/label/pie.label.stories.tsx b/stories/pie/label/pie.label.stories.tsx index ac499a4..87bb84c 100644 --- a/stories/pie/label/pie.label.stories.tsx +++ b/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})`, + }, +}; diff --git a/stories/pie/pie.args.ts b/stories/pie/pie.args.ts index 95cc3e6..d80fbee 100644 --- a/stories/pie/pie.args.ts +++ b/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'],