React Charts Range Column Chart

Overview

The React range column chart is used to display variations in data values over time. These charts support extensive UI customization for better visual presentation.

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.

Spacing and width

The React range column chart allows you to customize both the spacing between columns and the width of each column.

Missing data handling

React range column charts gracefully handle missing data by supporting empty points, ensuring continuity in the visual.

Vertical range column chart

The chart can be transposed vertically to offer an alternative perspective on the data.

Styling options

Customize line colors and borders using built-in APIs to match your data presentation needs.

React range column chart code example

Get started with the React range column chart using a few lines of TSX code, as shown below. You can also explore this React range column 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: 'Jan', low: 0.7, high: 6.1 }, 
      { x: 'Feb', low: 1.3, high: 6.3 }, 
      { x: 'Mar', low: 1.9, high: 8.5 },
      { x: 'Apr', low: 3.1, high: 10.8 }, 
      { x: 'May', low: 5.7, high: 14.40 }, 
      { x: 'Jun', low: 8.4, high: 16.90 },
      { x: 'Jul', low: 10.6, high: 19.20 }, 
      { x: 'Aug', low: 10.5, high: 18.9 }, 
      { x: 'Sep', low: 8.5, high: 16.1 },
      { x: 'Oct', low: 6.0, high: 12.5 }, 
      { x: 'Nov', low: 1.5, high: 6.9 }, 
      { x: 'Dec', low: 5.1, high: 12.1 }
    ];
    return (
        <Chart>
            <ChartPrimaryXAxis valueType='Category'>
            </ChartPrimaryXAxis>
            <ChartSeriesCollection>
              <ChartSeries dataSource={data} xField='x' high='high' low='low' type="RangeColumn" />
            </ChartSeriesCollection>
        </Chart>
    )
}