Charts - Label

Label is the text reference of a series or data.

Basic display

To set a series' label, you can pass in a string as a series' property label. The provided label will be visible at different locations such as the legend, or the tooltip.

<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

Conditional formatting

The label property also accepts a function allowing you to change the label content based on location.

The function receives location as its first argument which can have the following values:

'legend' to format the label in the Legend
'tooltip' to format the label in the Tooltip

<BarChart
  {...props}
  series={[
    { data: [2400, 1398, 9800], label: 'simple label' },
    { data: [500, 2398, 4300], label: (location) => `${location} label` },
  ]}
/>

<BarChart
  {...props}
  series={[
    { data: [2400, 1398, 9800], label: 'simple label' },
    { data: [500, 2398, 4300], label: (location) => `${location} label` },
  ]}
/>

Press Enter to start editing

Pie

The Pie chart behaves differently due to its nature. It has labels per slice instead of per series. It also has one more place where the label can be rendered.

Instead of receiving the label as part of the series. It instead receives it as part of the data set inside a series.

Its location argument can have the following values:

'legend' to format the label in the Legend
'tooltip' to format the label in the Tooltip
'arc' to format the Arc label when arcLabel is set to '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',
    },
  ]}
/>

<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.