React Line Chart

Line charts visualize data trends over time, connecting data points with lines. They effectively display continuous data, allowing for easy comparison and analysis of multiple datasets in a clear format

Overview

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

Data label

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

Dashed line

To display dashed lines in your chart series, use the dashArray property within the ChartSeries component.

• dashArray="5,5" creates a pattern of 5px dash followed by 5px gap.

Reference line

To display dashed reference lines in your chart, use the ChartStripLines component. Reference lines act as visual benchmarks, helping users compare actual data against targets, thresholds, or other key values.

• start: Specifies the position of the reference line.
• dashArray: Defines the dash pattern (e.g., 4,4 for 4px dash and 4px gap).
• text: Adds a label to the reference line.
• color: Customizes the line color.
• visible: Controls the visibility of the strip line.

Multi Colored Line

The Multi-Colored Line Chart makes your data visualization stand out by applying distinct colors to different segments of a line based on your data. This is perfect for highlighting trends, phases, or categories within continuous data, making complex patterns easy to understand at a glance. Use this feature to spot anomalies, visualize seasonal changes, or emphasize critical ranges without extra effort. Simply set the chart series type to MultiColoredLine and map the colorField property to your data for dynamic color rendering.

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 line 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 line series visually dips below the baseline (usually the X-axis), making it easy to identify declines or losses.

Vertical live chart

The vertical live chart displays real-time data updates in a transposed format where data flows vertically. This visualization is particularly effective for showing continuous data streams over time, with new data points being added dynamically at regular intervals.

Series customization

You can customize the appearance of the line 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.

Datasource update

We can dynamically replace the entire dataset in a Line 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