Overview
The React spline area chart is similar to a standard area chart, but it connects data points using smooth curves. It supports interactive features such as zooming, panning, and animations, as well as real-time updates.
Multiple series
Multiple spline area series can be plotted together to compare cumulative values over time, making it easier to analyze trends across datasets.
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
React line charts gracefully handle missing data by supporting empty points, ensuring continuity in visualization.
Vertical charts
A chart can be rotated vertically to offer a different perspective on the data.
Styling options
Customize the colors and borders of the spline area chart using built-in APIs to improve visual clarity and match your design.
React spline area chart code example
Quickly get started with the React spline area chart using a few lines of TSX code, as shown below. You can also explore this React spline 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: new Date(2002, 0, 1), y: 2.2 }, { x: new Date(2003, 0, 1), y: 3.4 },
{ x: new Date(2004, 0, 1), y: 2.8 }, { x: new Date(2005, 0, 1), y: 1.6 },
{ x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 2.5 },
{ x: new Date(2008, 0, 1), y: 2.9 }, { x: new Date(2009, 0, 1), y: 3.8 },
{ x: new Date(2010, 0, 1), y: 1.4 }, { x: new Date(2011, 0, 1), y: 3.1 }
];
return (
<Chart>
<ChartPrimaryXAxis valueType='DateTime'>
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries dataSource={data} xField="x" yField="y" type="SplineArea" />
</ChartSeriesCollection>
</Chart>
)
}Learning Resources
Pure React Components
Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.
