React Column Chart

A column chart visually represents data using vertical columns, making it easy to compare values across different categories or time periods.

Overview

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

Data label

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

A Stacking Column chart displays vertical columns divided into segments, representing different categories. It effectively compares totals and visualizes part-to-whole relationships, trends, and segmented data across various categories.

Stacking Column

To visualize data as a stacking column chart, set the type property to StackingColumn within the ChartSeries component.

Stacking labels

In stacked charts, stack labels display the cumulative total of each stack segment directly on the chart using data labels. This helps users quickly understand the total value represented by each stack.

When a stacked point includes negative values, the corresponding stack labels are positioned below the point.
You can enable this feature using the visible property in the ChartStackLabels component.

Stacking group

Use the stackingGroup property to group stacked columns for more effective comparisons.

Columns that share the same stackingGroup name will be stacked together.
This allows multiple stacks to appear side by side, each representing a different group.

This feature is especially useful when:

Comparing grouped data across categories
Visualizing subgroups within a larger dataset

100% Stacking Column

To visualize data as a 100% stacking Column chart, set the type property to StackingColumn100 within the ChartSeries component.

A StackingColumn100 chart displays vertical columns where each segment shows its percentage contribution to a total of 100%. It highlights relative proportions and part-to-whole comparisons across categories.

Column placement

To control the side-by-side arrangement of columns in a chart, set the enableSideBySidePlacement property to false in the Chart component.

When false, columns will overlap if they share the same category axis value.
When true (default), columns are placed side by side for better visual distinction.-by-side arrangement of the columns.

Negative data

A negative column chart visually represents negative values using downward-facing columns, making it easy to highlight trends and compare positive vs. negative data.

Negative values extend below the axis baseline
Useful for financial data, profit/loss analysis, or temperature variation

Column drilldown

This drilldown column chart example visualizes the population distribution across different continents. Users can click on the columns to explore further details, allowing for an interactive analysis of population statistics by country within each continent.

Grouping column

To group columns together in a chart, use the groupName property in the ChartSeries component. Columns that share the same groupName will be clustered visually under the same category.

Datasource update

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

Column with track

This chart compares water usage across different milk types, highlighting cow milk's high environmental impact (628 liters) versus sustainable alternatives like soy (28 liters). The bottle-effect design enhances visualization of sustainability metrics for informed consumer choices.

Customizing column spacing and width

You can control the spacing and width of column series in the chart using the following properties:

columnSpacing:

Defines the space between multiple column series.
- Accepts values from 0 to 1.
- A lower value results in tighter spacing, while a higher value increases the gap between columns.
columnWidth:

Determines the width of each individual column.
- Also accepts values from 0 to 1.
- A smaller value produces thinner columns, whereas a larger value makes them wider.

These properties allow you to fine-tune the layout and visual balance of your column chart for better readability and presentation.

Column width in pixels

To define the exact width of columns in pixels, use the columnWidthInPixel property within the ChartSeries Component.

This property allows you to specify a fixed column width, ensuring consistent sizing regardless of chart size or data density.
It is especially useful when you want precise control over the visual layout of your column chart.

Series customization

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

Customizing data point colors

The colorField property in the ChartSeries component enables you to assign different colors to individual data points based on the values of a specific field in the data source.