Getting started with React Chart

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React Chart component to the project.

Prerequisites

Node.js 20 or later.
The application is compatible with macOS, Windows, and Linux operating systems.

Installing Syncfusion® React packages

To use the chart component, install the @syncfusion/react-charts package:

npm install @syncfusion/react-charts

npm install @syncfusion/react-charts

Adding Chart component

To include the Chart component in your application, import the Chart from @syncfusion/react-charts package in App.tsx.

import { Chart } from "@syncfusion/react-charts";

import { Chart } from "@syncfusion/react-charts";

Add the Chart component in application as shown in below code example.

import { Chart, ChartSeriesCollection, ChartSeries } from "@syncfusion/react-charts";
        export default function App() {
            const data = [
                { 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 }
            ];
            return (
                <Chart>
                    <ChartSeriesCollection>
                        <ChartSeries dataSource={data} xField="x" yField="y" />
                    </ChartSeriesCollection>
                </Chart>
            );
        }

import { Chart, ChartSeriesCollection, ChartSeries } from "@syncfusion/react-charts";
        export default function App() {
            const data = [
                { 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 }
            ];
            return (
                <Chart>
                    <ChartSeriesCollection>
                        <ChartSeries dataSource={data} xField="x" yField="y" />
                    </ChartSeriesCollection>
                </Chart>
            );
        }

Chart title

Use the text property of the ChartTitle component to display a chart title that provides users with a quick understanding of the data being visualized.

import { Chart, ChartPrimaryXAxis, ChartPrimaryYAxis, ChartSeriesCollection, ChartSeries, ChartMajorGridLines, ChartMajorTickLines, ChartArea, ChartTitle, ChartTooltip } from "@syncfusion/react-charts";
        export default function App() {
            return (
                <Chart id="overview-title">
                    <ChartTitle text="Sales Analysis"/>
                    <ChartSeriesCollection>
                        <ChartSeries dataSource={data} xField="month" yField="sales" type="Column" />
                    </ChartSeriesCollection>
                </Chart>
            );
        }

import { Chart, ChartPrimaryXAxis, ChartPrimaryYAxis, ChartSeriesCollection, ChartSeries, ChartMajorGridLines, ChartMajorTickLines, ChartArea, ChartTitle, ChartTooltip } from "@syncfusion/react-charts";
        export default function App() {
            return (
                <Chart id="overview-title">
                    <ChartTitle text="Sales Analysis"/>
                    <ChartSeriesCollection>
                        <ChartSeries dataSource={data} xField="month" yField="sales" type="Column" />
                    </ChartSeriesCollection>
                </Chart>
            );
        }

Data markers are used to provide information about the data points in a series. You can add a shape to visually enhance each data point. To display markers on the chart, set the visible property to true in the ChartMarker component.

import { Chart, ChartPrimaryXAxis, ChartPrimaryYAxis, ChartSeriesCollection, ChartSeries, ChartMajorGridLines, ChartMajorTickLines, ChartArea, ChartMarker } from "@syncfusion/react-charts";
        export default function App() {
            return (
                <Chart id="overview-marker">
                    <ChartSeriesCollection>
                        <ChartSeries dataSource={data} xField="month" yField="sales" type="Column">
                            <ChartMarker visible={true} />
                        </ChartSeries>
                    </ChartSeriesCollection>
                </Chart>
            );
        }

import { Chart, ChartPrimaryXAxis, ChartPrimaryYAxis, ChartSeriesCollection, ChartSeries, ChartMajorGridLines, ChartMajorTickLines, ChartArea, ChartMarker } from "@syncfusion/react-charts";
        export default function App() {
            return (
                <Chart id="overview-marker">
                    <ChartSeriesCollection>
                        <ChartSeries dataSource={data} xField="month" yField="sales" type="Column">
                            <ChartMarker visible={true} />
                        </ChartSeries>
                    </ChartSeriesCollection>
                </Chart>
            );
        }

DataLabel

Data labels in a chart provide additional information about individual data points in the series. To enable labels for the data points, set the visible property to true in the ChartDataLabel component.

import { Chart, ChartPrimaryXAxis, ChartPrimaryYAxis, ChartSeriesCollection, ChartSeries, ChartMajorGridLines, ChartMajorTickLines, ChartArea, ChartMarker, ChartDataLabel } from "@syncfusion/react-charts";
        export default function App() {
            return (
                <Chart id="overview-label">
                    <ChartSeriesCollection>
                        <ChartSeries dataSource={data} xField="month" yField="sales" type="Column">
                            <ChartMarker>
                                <ChartDataLabel visible={true}/>
                            </ChartMarker>
                        </ChartSeries>
                    </ChartSeriesCollection>
                </Chart>
            );
        }

import { Chart, ChartPrimaryXAxis, ChartPrimaryYAxis, ChartSeriesCollection, ChartSeries, ChartMajorGridLines, ChartMajorTickLines, ChartArea, ChartMarker, ChartDataLabel } from "@syncfusion/react-charts";
        export default function App() {
            return (
                <Chart id="overview-label">
                    <ChartSeriesCollection>
                        <ChartSeries dataSource={data} xField="month" yField="sales" type="Column">
                            <ChartMarker>
                                <ChartDataLabel visible={true}/>
                            </ChartMarker>
                        </ChartSeries>
                    </ChartSeriesCollection>
                </Chart>
            );
        }

The chart displays details about data points through tooltips when the mouse hovers over them. You can enable this feature by setting the enable property to true in the ChartTooltip component.

import { Chart, ChartPrimaryXAxis, ChartPrimaryYAxis, ChartSeriesCollection, ChartSeries, ChartMajorGridLines, ChartMajorTickLines, ChartArea, ChartTooltip, ChartLegend } from "@syncfusion/react-charts";
        export default function App() {
            return (
                <Chart id="overview-tooltip">
                    <ChartTooltip enable={true} />
                    <ChartSeriesCollection>
                        <ChartSeries dataSource={data} xField="month" yField="sales" type="Column" />
                    </ChartSeriesCollection>
                </Chart>
            );
        }

import { Chart, ChartPrimaryXAxis, ChartPrimaryYAxis, ChartSeriesCollection, ChartSeries, ChartMajorGridLines, ChartMajorTickLines, ChartArea, ChartTooltip, ChartLegend } from "@syncfusion/react-charts";
        export default function App() {
            return (
                <Chart id="overview-tooltip">
                    <ChartTooltip enable={true} />
                    <ChartSeriesCollection>
                        <ChartSeries dataSource={data} xField="month" yField="sales" type="Column" />
                    </ChartSeriesCollection>
                </Chart>
            );
        }

Run the project

To run the project, use the following command:

npm run dev

npm run dev

After run the project, we have to show the chart.