Charts - Label

Customize how series and data points are labeled in charts.

A label is the text that identifies a series or data point in a chart, appearing in locations such as the legend, tooltip, or directly on chart elements.

You can set a series label by passing a string to the label property of a series. The label appears in different locations such as the legend and tooltip.

label 1

<BarChart
  {...props}
  series={[
    {
      data: [2400, 1398, 9800],
      label: 'label 1',
    },
  ]}
/>

<BarChart
  {...props}
  series={[
    {
      data: [2400, 1398, 9800],
      label: 'label 1',
    },
  ]}
/>

Press Enter to start editing

The Pie chart behaves differently due to its nature. It has labels per slice instead of per series, and provides one additional location where labels can be rendered. Instead of receiving the label as part of the series, it receives it as part of the data set inside a series.

The location argument can have the following values:

'legend': Format the label in the Legend
'tooltip': Format the label in the Tooltip
'arc': Format the Arc label when arcLabel is set to 'label'

legend+A
legend+B
legend+C

<PieChart
  {...props}
  series={[
    {
      data: [
        { id: 0, value: 10, label: (location) => `${location}+A` },
        { id: 1, value: 15, label: (location) => `${location}+B` },
        { id: 2, value: 20, label: (location) => `${location}+C` },
      ],
      type: 'pie',
      arcLabel: 'label',
    },
  ]}
/>

<PieChart
  {...props}
  series={[
    {
      data: [
        { id: 0, value: 10, label: (location) => `${location}+A` },
        { id: 1, value: 15, label: (location) => `${location}+B` },
        { id: 2, value: 20, label: (location) => `${location}+C` },
      ],
      type: 'pie',
      arcLabel: 'label',
    },
  ]}
/>

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

Charts - Label

Conditional formatting

Pie chart labels

API