React Range Column Chart

Range Column charts make it easy to compare value ranges across categories. Each column spans from the minimum to the maximum value, giving a clear view of the spread and trends at a glance. Perfect for showing highs and lows—like temperature ranges or performance metrics—while keeping your dashboard clean and intuitive.

Overview

To visualize data as a range column chart, set the type property to RangeColumn within the ChartSeries component. Bind your data’s high and low values so each column spans the range, making it easy to compare variations across categories.

Multiple Range Column Series

Multiple range column series can be displayed in a single chart, allowing different datasets to be combined for comparison. This approach is useful for analyzing variations and trends among multiple groups simultaneously.

Data Label

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

Horizontal Range Column

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 area charts or when working with long category labels.

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.

By using Average mode, we can connect the missing points with auto-interpolated data. It will fill the series with most appropriate data for non-available points.

Datasource Update

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

This approach is especially useful during:

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

Series Customization

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

• fill – Sets the color of the column in the series.
• opacity – Controls the transparency level of the column, allowing for varying visibility.
• border – Defines the thickness and color of the border around the column.
• cornerRadius – Specifies the radius of the corners of the columns, allowing for rounded edges.