# chart-line

> Line chart comparing annual crude steel production by country with labels and tooltips.

**Framework:** react  **Component:** Chart  **Variant:** line

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/js/chart-line.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-charts
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/chart-line/Chart.jsx

```jsx
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Legend, Double, Tooltip, Highlight, SeriesLabel } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
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 }
];
const SAMPLE_CSS = `
    .control-fluid {
        padding: 0px !important;
    }
    .charts {
        align :center
    }`;
const Line = () => {
    const onChartLoad = (args) => {
        let chart = document.getElementById('charts');
        chart.setAttribute('title', '');
    };
    return (<div className="control-pane">
            <style>{SAMPLE_CSS}</style>
            <div className="control-section">
                <ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'Double', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 } }} primaryYAxis={{ title: 'Volume in million metric tons', labelFormat: '{value}', rangePadding: 'None', minimum: 0, maximum: 25, interval: 5, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 }, margin: { bottom: 12 } }} tooltip={{ enable: true, enableHighlight: true, showNearestTooltip: true, header: '<b>${series.name}</b>', format: '${point.x} : <b>${point.y}M</b>' }} legendSettings={{ enableHighlight: true }} width={Browser.isDevice ? '100%' : '75%'} title="Annual Crude Steel Production by Country (2016–2024)" subTitle="Source: wikipedia.org" loaded={onChartLoad.bind(this)}>
                    <Inject services={[LineSeries, Double, Legend, Tooltip, Highlight, SeriesLabel]}/>
                    <SeriesCollectionDirective>
                        <SeriesDirective dataSource={vietnamData} xName="x" yName="y" name="Vietnam" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Circle', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
                        <SeriesDirective dataSource={indonesiaData} xName="x" yName="y" name="Indonesia" width={2} marker={{ visible: true, width: 6, height: 6, shape: 'Triangle', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
                        <SeriesDirective dataSource={franceData} xName="x" yName="y" name="France" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Diamond', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
                        <SeriesDirective dataSource={polandData} xName="x" yName="y" name="Poland" width={2} marker={{ visible: true, width: 5, height: 5, shape: 'Rectangle', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
                        <SeriesDirective dataSource={mexicoData} xName="x" yName="y" name="Mexico" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Pentagon', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>
        </div>);
};
export default Line;
```