React Stacked Bar Chart

A stacking bar chart displays multiple data series stacked horizontally within bars, allowing for easy comparison of total values and individual contributions across categories, particularly useful for visualizing part-to-whole relationships.

Overview

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

Data label

To display data labels on the stackingBar chart, set the visible property to true within the ChartDataLabel 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.

Negative data

A negative stacking bar chart is a type of bar chart where the bars are stacked in a way that represents negative values. This visualization is particularly useful for displaying data that includes both positive and negative values.

Stacking group

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

• Bars 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

Customizing bar spacing and width

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

• columnSpacing:

  Defines the space between multiple bar series.

  • Accepts values from 0 to 1.
  • A lower value results in tighter spacing, while a higher value increases the gap between bar.

• columnWidth:

  Determines the width of each individual bar.

  • 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 bar chart for better readability and presentation.

Bar 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 stacking bar series in the ChartSeries component by setting the following properties:

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