Series label in React Charts

The series label displays the name of each series inline, positioned near the end of the series path or the last visible data point. This helps identify each series without referring to the legend.

The series label is supported by Line, Column, Area, Spline, and Stacked variants. Before using this feature, make sure the chart is set up by following the Getting Started page.

Note: To use the series label feature, import the SeriesLabel module from @syncfusion/ej2-react-charts and include it in the services array of the Inject component.

Enable series label

Enable series labels using the labelSettings property within the series configuration. Set the visible property to true to display the label.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
  LineSeries, Category, DataLabel, SeriesLabel, Legend
} from '@syncfusion/ej2-react-charts';
import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from './datasource';

function App() {
  return <ChartComponent id='charts' primaryXAxis={{ valueType: 'Category' }} legendSettings={{ visible: true }}>
    <Inject services={[LineSeries, DataLabel, Category, SeriesLabel, Legend]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={vietnamData} xName='x' yName='y' name='Vietnam' type='Line'
        labelSettings={{ visible: true }} marker={{ visible: true }}>
      </SeriesDirective>
      <SeriesDirective dataSource={indonesiaData} xName='x' yName='y' name='Indonesia' type='Line'
        labelSettings={{ visible: true }} marker={{ visible: true }}>
      </SeriesDirective>
      <SeriesDirective dataSource={franceData} xName='x' yName='y' name='France' type='Line'
        labelSettings={{ visible: true }} marker={{ visible: true }}>
      </SeriesDirective>
      <SeriesDirective dataSource={polandData} xName='x' yName='y' name='Poland' type='Line'
        labelSettings={{ visible: true }} marker={{ visible: true }}>
      </SeriesDirective>
      <SeriesDirective dataSource={mexicoData} xName='x' yName='y' name='Mexico' type='Line'
        labelSettings={{ visible: true }} marker={{ visible: true }}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
    LineSeries, Category, DataLabel, SeriesLabel, Legend
} from '@syncfusion/ej2-react-charts';
import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from "./datasource";

function App(): JSX.Element {
    return <ChartComponent id='charts' primaryXAxis={{ valueType: 'Category' }} legendSettings={{ visible: true }}>
        <Inject services={[LineSeries, DataLabel, Category, SeriesLabel, Legend]} />
        <SeriesCollectionDirective>
            <SeriesDirective dataSource={vietnamData} xName='x' yName='y' name='Vietnam' type='Line'
                labelSettings={{ visible: true }} marker={{ visible: true }}>
            </SeriesDirective>
            <SeriesDirective dataSource={indonesiaData} xName='x' yName='y' name='Indonesia' type='Line'
                labelSettings={{ visible: true }} marker={{ visible: true }}>
            </SeriesDirective>
            <SeriesDirective dataSource={franceData} xName='x' yName='y' name='France' type='Line'
                labelSettings={{ visible: true }} marker={{ visible: true }}>
            </SeriesDirective>
            <SeriesDirective dataSource={polandData} xName='x' yName='y' name='Poland' type='Line'
                labelSettings={{ visible: true }} marker={{ visible: true }}>
            </SeriesDirective>
            <SeriesDirective dataSource={mexicoData} xName='x' yName='y' name='Mexico' type='Line'
                labelSettings={{ visible: true }} marker={{ visible: true }}>
            </SeriesDirective>
        </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let vietnamData = [
  { x: 2016, y: 7.8 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 15.5 },
  { x: 2019, y: 17.5 },
  { x: 2020, y: 19.5 },
  { x: 2021, y: 23.0 },
  { x: 2022, y: 20.0 },
  { x: 2023, y: 19.0 },
  { x: 2024, y: 22.1 }
];

export let indonesiaData = [
  { x: 2016, y: 4.8 },
  { x: 2017, y: 5.2 },
  { x: 2018, y: 6.2 },
  { x: 2019, y: 7.8 },
  { x: 2020, y: 9.3 },
  { x: 2021, y: 14.3 },
  { x: 2022, y: 15.6 },
  { x: 2023, y: 16.0 },
  { x: 2024, y: 17.0 }
];

export let franceData = [
  { x: 2016, y: 14.6 },
  { x: 2017, y: 15.5 },
  { x: 2018, y: 15.4 },
  { x: 2019, y: 14.4 },
  { x: 2020, y: 11.6 },
  { x: 2021, y: 13.9 },
  { x: 2022, y: 12.1 },
  { x: 2023, y: 10.0 },
  { x: 2024, y: 10.8 }
];

export let polandData = [
  { x: 2016, y: 8.9 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 10.8 },
  { x: 2019, y: 9.0 },
  { x: 2020, y: 7.9 },
  { x: 2021, y: 8.5 },
  { x: 2022, y: 7.4 },
  { x: 2023, y: 6.4 },
  { x: 2024, y: 7.1 }
];

export let mexicoData = [
  { x: 2016, y: 19.0 },
  { x: 2017, y: 20.0 },
  { x: 2018, y: 20.2 },
  { x: 2019, y: 18.4 },
  { x: 2020, y: 16.8 },
  { x: 2021, y: 18.5 },
  { x: 2022, y: 18.4 },
  { x: 2023, y: 16.3 },
  { x: 2024, y: 13.7 }
];
export let vietnamData: { x: number; y: number }[] = [
  { x: 2016, y: 7.8 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 15.5 },
  { x: 2019, y: 17.5 },
  { x: 2020, y: 19.5 },
  { x: 2021, y: 23.0 },
  { x: 2022, y: 20.0 },
  { x: 2023, y: 19.0 },
  { x: 2024, y: 22.1 }
];

export let indonesiaData: { x: number; y: number }[] = [
  { x: 2016, y: 4.8 },
  { x: 2017, y: 5.2 },
  { x: 2018, y: 6.2 },
  { x: 2019, y: 7.8 },
  { x: 2020, y: 9.3 },
  { x: 2021, y: 14.3 },
  { x: 2022, y: 15.6 },
  { x: 2023, y: 16.0 },
  { x: 2024, y: 17.0 }
];

export let franceData: { x: number; y: number }[] = [
  { x: 2016, y: 14.6 },
  { x: 2017, y: 15.5 },
  { x: 2018, y: 15.4 },
  { x: 2019, y: 14.4 },
  { x: 2020, y: 11.6 },
  { x: 2021, y: 13.9 },
  { x: 2022, y: 12.1 },
  { x: 2023, y: 10.0 },
  { x: 2024, y: 10.8 }
];

export let polandData: { x: number; y: number }[] = [
  { x: 2016, y: 8.9 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 10.8 },
  { x: 2019, y: 9.0 },
  { x: 2020, y: 7.9 },
  { x: 2021, y: 8.5 },
  { x: 2022, y: 7.4 },
  { x: 2023, y: 6.4 },
  { x: 2024, y: 7.1 }
];

export let mexicoData: { x: number; y: number }[] = [
  { x: 2016, y: 19.0 },
  { x: 2017, y: 20.0 },
  { x: 2018, y: 20.2 },
  { x: 2019, y: 18.4 },
  { x: 2020, y: 16.8 },
  { x: 2021, y: 18.5 },
  { x: 2022, y: 18.4 },
  { x: 2023, y: 16.3 },
  { x: 2024, y: 13.7 }
];

Customization

Customize the appearance and behavior of series labels using the following properties:

  • visible – Enables or disables the series label. Default: false.
  • text – Custom text for the label. Defaults to the series name.
  • font – Font customization options including color, size, fontFamily, fontStyle, and fontWeight.
  • background – Background color of the label.
  • border – Border of the label, configured with width and color.
  • opacity – Label transparency. Default: 1.
  • position – Label placement relative to the end of the series (for example, Near, Middle, Far).
  • margin – Spacing around the label with left, right, top, and bottom values.
  • rx and ry – Corner radii for the label background. Require a non-null border.
  • showOverlapText – Controls whether labels that overlap other labels are shown. Default: true.
  • connectorLine – Properties of the line drawn between the last data point and the label, including width, color, and dashArray.
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
  LineSeries, Category, SeriesLabel, Legend
} from '@syncfusion/ej2-react-charts';
import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from './datasource';

function App() {
  return <ChartComponent id='charts' primaryXAxis={{ valueType: 'Category' }} legendSettings={{ visible: true }}>
    <Inject services={[LineSeries, Category, SeriesLabel, Legend]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={vietnamData} xName='x' yName='y' name='Vietnam' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, background: '#E8F5E9', border: { width: 2, color: '#2E7D32' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#2E7D32' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#2E7D32' } }}>
      </SeriesDirective>
      <SeriesDirective dataSource={indonesiaData} xName='x' yName='y' name='Indonesia' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, background: '#FFF3E0', border: { width: 2, color: '#FB8C00' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#FB8C00' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#FB8C00' } }}>
      </SeriesDirective>
      <SeriesDirective dataSource={franceData} xName='x' yName='y' name='France' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, background: '#E3F2FD', border: { width: 2, color: '#1976D2' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#1976D2' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#1976D2' } }}>
      </SeriesDirective>
      <SeriesDirective dataSource={polandData} xName='x' yName='y' name='Poland' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, background: '#F3E5F5', border: { width: 2, color: '#8E24AA' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#8E24AA' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#8E24AA' } }}>
      </SeriesDirective>
      <SeriesDirective dataSource={mexicoData} xName='x' yName='y' name='Mexico' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, background: '#FBE9E7', border: { width: 2, color: '#D84315' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#D84315' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#D84315' } }}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
  LineSeries, Category, SeriesLabel, Legend
} from '@syncfusion/ej2-react-charts';
import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from './datasource';

function App(): JSX.Element {
  return <ChartComponent id='charts' primaryXAxis={{ valueType: 'Category' }} legendSettings={{ visible: true }}>
    <Inject services={[LineSeries, Category, SeriesLabel, Legend]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={vietnamData} xName='x' yName='y' name='Vietnam' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, background: '#E8F5E9', border: { width: 2, color: '#2E7D32' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#2E7D32' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#2E7D32' } }}>
      </SeriesDirective>
      <SeriesDirective dataSource={indonesiaData} xName='x' yName='y' name='Indonesia' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, background: '#FFF3E0', border: { width: 2, color: '#FB8C00' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#FB8C00' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#FB8C00' } }}>
      </SeriesDirective>
      <SeriesDirective dataSource={franceData} xName='x' yName='y' name='France' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, background: '#E3F2FD', border: { width: 2, color: '#1976D2' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#1976D2' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#1976D2' } }}>
      </SeriesDirective>
      <SeriesDirective dataSource={polandData} xName='x' yName='y' name='Poland' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, background: '#F3E5F5', border: { width: 2, color: '#8E24AA' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#8E24AA' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#8E24AA' } }}>
      </SeriesDirective>
      <SeriesDirective dataSource={mexicoData} xName='x' yName='y' name='Mexico' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, background: '#FBE9E7', border: { width: 2, color: '#D84315' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#D84315' }, rx: 4, ry: 4, connectorLine: { width: 1, color: '#D84315' } }}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let vietnamData = [
  { x: 2016, y: 7.8 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 15.5 },
  { x: 2019, y: 17.5 },
  { x: 2020, y: 19.5 },
  { x: 2021, y: 23.0 },
  { x: 2022, y: 20.0 },
  { x: 2023, y: 19.0 },
  { x: 2024, y: 22.1 }
];

export let indonesiaData = [
  { x: 2016, y: 4.8 },
  { x: 2017, y: 5.2 },
  { x: 2018, y: 6.2 },
  { x: 2019, y: 7.8 },
  { x: 2020, y: 9.3 },
  { x: 2021, y: 14.3 },
  { x: 2022, y: 15.6 },
  { x: 2023, y: 16.0 },
  { x: 2024, y: 17.0 }
];

export let franceData = [
  { x: 2016, y: 14.6 },
  { x: 2017, y: 15.5 },
  { x: 2018, y: 15.4 },
  { x: 2019, y: 14.4 },
  { x: 2020, y: 11.6 },
  { x: 2021, y: 13.9 },
  { x: 2022, y: 12.1 },
  { x: 2023, y: 10.0 },
  { x: 2024, y: 10.8 }
];

export let polandData = [
  { x: 2016, y: 8.9 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 10.8 },
  { x: 2019, y: 9.0 },
  { x: 2020, y: 7.9 },
  { x: 2021, y: 8.5 },
  { x: 2022, y: 7.4 },
  { x: 2023, y: 6.4 },
  { x: 2024, y: 7.1 }
];

export let mexicoData = [
  { x: 2016, y: 19.0 },
  { x: 2017, y: 20.0 },
  { x: 2018, y: 20.2 },
  { x: 2019, y: 18.4 },
  { x: 2020, y: 16.8 },
  { x: 2021, y: 18.5 },
  { x: 2022, y: 18.4 },
  { x: 2023, y: 16.3 },
  { x: 2024, y: 13.7 }
];
export let vietnamData: { x: number; y: number }[] = [
  { x: 2016, y: 7.8 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 15.5 },
  { x: 2019, y: 17.5 },
  { x: 2020, y: 19.5 },
  { x: 2021, y: 23.0 },
  { x: 2022, y: 20.0 },
  { x: 2023, y: 19.0 },
  { x: 2024, y: 22.1 }
];

export let indonesiaData: { x: number; y: number }[] = [
  { x: 2016, y: 4.8 },
  { x: 2017, y: 5.2 },
  { x: 2018, y: 6.2 },
  { x: 2019, y: 7.8 },
  { x: 2020, y: 9.3 },
  { x: 2021, y: 14.3 },
  { x: 2022, y: 15.6 },
  { x: 2023, y: 16.0 },
  { x: 2024, y: 17.0 }
];

export let franceData: { x: number; y: number }[] = [
  { x: 2016, y: 14.6 },
  { x: 2017, y: 15.5 },
  { x: 2018, y: 15.4 },
  { x: 2019, y: 14.4 },
  { x: 2020, y: 11.6 },
  { x: 2021, y: 13.9 },
  { x: 2022, y: 12.1 },
  { x: 2023, y: 10.0 },
  { x: 2024, y: 10.8 }
];

export let polandData: { x: number; y: number }[] = [
  { x: 2016, y: 8.9 },
  { x: 2017, y: 10.3 },
  { x: 2018, y: 10.8 },
  { x: 2019, y: 9.0 },
  { x: 2020, y: 7.9 },
  { x: 2021, y: 8.5 },
  { x: 2022, y: 7.4 },
  { x: 2023, y: 6.4 },
  { x: 2024, y: 7.1 }
];

export let mexicoData: { x: number; y: number }[] = [
  { x: 2016, y: 19.0 },
  { x: 2017, y: 20.0 },
  { x: 2018, y: 20.2 },
  { x: 2019, y: 18.4 },
  { x: 2020, y: 16.8 },
  { x: 2021, y: 18.5 },
  { x: 2022, y: 18.4 },
  { x: 2023, y: 16.3 },
  { x: 2024, y: 13.7 }
];

Troubleshooting

  • Series label is not visible. Confirm the SeriesLabel module is registered in the Inject services array and that labelSettings.visible is set to true on each series.
  • Label does not appear at the end of the series. The label is anchored to the last visible data point. If the last point is filtered or null, the label will not render.
  • Label text overlaps with another label. Set showOverlapText to false to hide overlapping labels.
  • Customizations do not apply. Ensure properties are set inside the series’ labelSettings (e.g., series.labelSettings.background), not on the chart-level default.

See Also