Overview
The React area chart is similar to a line chart in that it visualizes data over time and highlights trends at regular intervals. However, it also fills the space beneath the line, adding emphasis to the magnitude of values. It supports plotting data using numeric, categorical, date-time, or logarithmic axes.
Multiple data series
Multiple data series can be plotted within a single chart, allowing users to compare different datasets. Enabling features like legends and tooltips provides additional insights into each series.
Data markers
Data points can be marked using built-in shapes: circles, rectangles, ellipses, vertical and horizontal lines, diamonds, triangles, pentagons, crosses, and plus signs. Custom images can also be used to enhance visual appeal.
Data labels
Data labels offer contextual information for each data point and can be rotated to a specified angle for better readability.
Dual axes
Multiple axes can be used to plot datasets with significantly different value ranges, enabling clearer comparisons
Zoom and pan
Zooming and panning features allow users to explore specific regions of large datasets for detailed analysis.
Missing data handling
The chart gracefully manages missing or null data points by supporting empty values, ensuring smooth visualization.
Vertical area chart
The area chart can be transposed vertically, offering an alternative view of the data for better analysis.
Styling options
Enhance the chart’s clarity and visual appeal by customizing its colors and borders using built-in APIs.
React area chart code example
Quickly get started with the React area chart using a few lines of TSX code, as shown below. You can also explore this React area chart example to learn how to render and customize the chart in a React application.
import { Chart, ChartPrimaryXAxis, ChartSeriesCollection, ChartSeries } from '@syncfusion/react-charts';
export default function App() {
const data = [
{ x: 'CHN', y: 12, },
{ x: 'GER', y: 15, },
{ x: 'RUS', y: 30 },
{ x: 'BRZ', y: 6.4 },
{ x: 'IND', y: 14 }
];
return (
<Chart>
<ChartPrimaryXAxis valueType='Category'>
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries dataSource={data} xField="x" yField="y" type="Area" />
</ChartSeriesCollection>
</Chart>
)
}Learning resources
Pure React Components
Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.
