Syncfusion AI Assistant

How can I help you?

Series label in React Chart component

12 Mar 202624 minutes to read

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.

Overview

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 }
];

Note: To use the series label feature, inject the SeriesLabel module into the services.

Customization

Customize the appearance of series labels using the following properties:

  • text – Custom text for the label. Defaults to the series name.
  • font – Font customization options including color, size, family, and weight.
  • background – Background color of the label.
  • border – Border width and color.
  • opacity – Label transparency (default: 1).
  • showOverlapText – When false, overlapping labels are hidden.
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' marker={{ visible: true }}
        labelSettings={{ visible: true, text: 'Vietnam', background: '#E8F5E9', border: { width: 2, color: '#2E7D32' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#2E7D32' }, showOverlapText: true }}>
      </SeriesDirective>
      <SeriesDirective dataSource={indonesiaData} xName='x' yName='y' name='Indonesia' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, text: 'Indonesia', background: '#FFF3E0', border: { width: 2, color: '#FB8C00' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#FB8C00' }, showOverlapText: true }}>
      </SeriesDirective>
      <SeriesDirective dataSource={franceData} xName='x' yName='y' name='France' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, text: 'France', background: '#E3F2FD', border: { width: 2, color: '#1976D2' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#1976D2' }, showOverlapText: true }}>
      </SeriesDirective>
      <SeriesDirective dataSource={polandData} xName='x' yName='y' name='Poland' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, text: 'Poland', background: '#F3E5F5', border: { width: 2, color: '#8E24AA' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#8E24AA' }, showOverlapText: true }}>
      </SeriesDirective>
      <SeriesDirective dataSource={mexicoData} xName='x' yName='y' name='Mexico' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, text: 'Mexico', background: '#FBE9E7', border: { width: 2, color: '#D84315' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#D84315' }, showOverlapText: 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' marker={{ visible: true }}
        labelSettings={{ visible: true, text: 'Vietnam', background: '#E8F5E9', border: { width: 2, color: '#2E7D32' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#2E7D32' }, showOverlapText: true }}>
      </SeriesDirective>
      <SeriesDirective dataSource={indonesiaData} xName='x' yName='y' name='Indonesia' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, text: 'Indonesia', background: '#FFF3E0', border: { width: 2, color: '#FB8C00' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#FB8C00' }, showOverlapText: true }}>
      </SeriesDirective>
      <SeriesDirective dataSource={franceData} xName='x' yName='y' name='France' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, text: 'France', background: '#E3F2FD', border: { width: 2, color: '#1976D2' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#1976D2' }, showOverlapText: true }}>
      </SeriesDirective>
      <SeriesDirective dataSource={polandData} xName='x' yName='y' name='Poland' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, text: 'Poland', background: '#F3E5F5', border: { width: 2, color: '#8E24AA' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#8E24AA' }, showOverlapText: true }}>
      </SeriesDirective>
      <SeriesDirective dataSource={mexicoData} xName='x' yName='y' name='Mexico' type='Line' marker={{ visible: true }}
        labelSettings={{ visible: true, text: 'Mexico', background: '#FBE9E7', border: { width: 2, color: '#D84315' }, opacity: 0.9, font: { size: '12px', fontWeight: '600', color: '#D84315' }, showOverlapText: 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 }
];