React Bar Chart

A bar chart visually represents categorical data using rectangular bars, allowing easy comparison of values across different categories.

Overview

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

Data label

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

Stacking

A stacked bar chart displays categorical data using segmented rectangular bars, allowing comparison of both total values and individual segments across categories.

Stacking Bar

To visualize data as a stacking bar chart, set the type property to StackingBar 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 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

100% Stacking Bar

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

A StackingBar100 chart displays horizontal bars where each segment represents a percentage of the total value. It effectively compares relative contributions normalized to 100% across different categories.

Grouped bar

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

Negative data

A negative bar chart visually represents negative values using downward-facing bars, 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

Bar with track

A bar chart with track displays both actual values and target or maximum values in a single visualization. This technique uses two overlapping bars:

• The track bar represents the target or maximum value.
• The actual bar overlays the track to show progress or performance.

Datasource update

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

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 bars, 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 bars in pixels, use the columnWidthInPixel property within the ChartSeries Component.

• This property allows you to specify a fixed bar 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 bar chart.

Series customization

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

• fill – Sets the color of the bars in the series.
• opacity – Controls the transparency level of the bars, allowing for varying visibility.
• border – Defines the thickness and color of the border around the bars.
• cornerRadius – Specifies the radius of the corners of the bars, 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.