React Spline Chart

A spline chart is a type of line chart that uses smooth curves to connect data points. It's used to visualize trends and relationships in continuous data, enhancing readability and aesthetics.

Overview

To visualize data as a spline chart, set the type property to Spline within the ChartSeries component.

Data label

To display data labels on the spline chart, set the visible property to true within the ChartDataLabel component.

The splineType property in the ChartSeries component allows you to customize how curves are drawn in a Spline chart. By default, the spline type is set to Natural, which produces smooth and flowing curves. You can change it to other types based on your data visualization needs:

Natural – Smooth, flowing curves.
Monotonic – Preserves monotonicity; avoids overshooting.
Cardinal – Balanced smoothness with tension control.
Clamped – Restricts curve within data bounds.

Skip missing points

Data points with values of null, undefined, or NaN are treated as empty points in the series. You can customize their appearance and behavior using the emptyPointSettings property in the ChartSeries component. This property supports various modes, including Gap, Zero, Average, and Drop, allowing you to control how empty points are rendered or connected in the chart.

Live point update

React Chart supports live data updates, ensuring your chart reflects the latest information in real time without requiring a page reload. Whenever the chart's data source changes, the chart automatically re-renders to display the updated values.

Inverted axes

To switch the X and Y axes in your chart, use the transposed property in the Chart component. When this property is enabled, the chart is rendered in a transposed format, which can enhance readability and data comparison, especially for horizontal spline charts or when working with long category labels.

Negative data

Charts can display negative values to represent downward trends in performance, metrics, or other data over time. A negative spline series visually dips below the baseline (usually the X-axis), making it easy to identify declines or losses.

Series customization

You can customize the appearance of the spline series in the ChartSeries component by setting the following properties:

fill – Sets the color of the line.
width – Defines the thickness of the line.
opacity – Controls the transparency level of the line.
dashArray - Defines the pattern of dashes and gaps in lines.

Datasource update

We can dynamically replace the entire dataset in a Spline chart when the underlying data changes significantly.

This is especially useful during:

Periodic refreshes (e.g., hourly or daily updates)
Batch processing of large datasets
Recalculated analytics or simulations