StackedBarChart

The <StackedBarChart> component is built specifically for use in the OECD Going Digital Toolkit, it is not a generic component.

It makes a lot of assumptions about the shape of the data and the ways we want to visualize the data.

The component doesn't require you to pre-filter the data. Any filtering, cleaning, grouping is done inside this component, based on the configuration you provide.

It can be used to display bars (or stacks of bars) and symbols, in any combination.

Overview

Bars and Stacked Bars

Use breakdownDomain to define which values should be stacked. If we don't have a complete stack for a country, it is removed from the chart. To render simple bars, set breakdownDomain to an array with a single item.

Stacked Bars Fallback

When rendering stacked bars and a full stack is not available for a country, you can specify a single fallback breakdown to be used instead. It will be rendered as a single (non-stacked) bar.

Symbols

To render symbols on top of bars, set symbolsDomain in addition to breakdownDomain. To render just the symbols, set breakdownDomain to an empty array.

Symbol Fallback

When rendering symbols and the data is not available for the year, you can specify maxYearDrift for a maxium delta of years in symbols mkStackedBarChart descriptor. For example, for a chart with 2022 data, maxYearDrift: 3 represents allow oldest data of 2019.

Below example, France has Symbol 1 value from 2018, and Symbol 2 value from 2019.

Dual-Axis Support

The StackedBarChart supports rendering symbols on a secondary Y-axis with a different scale than the primary axis. This is useful when visualizing two datasets with different ranges or units.

Usage

To enable dual-axis mode, provide an axisSecondary configuration in the encoding.cross prop:

Behavior

• Primary axis (left): Used for bars and stacks
• Secondary axis (right): Used for symbols when axisSecondary is defined
• Automatic domain: If domain is not provided, it's calculated from symbol values
• Independent scaling: Each axis has its own scale and format
• Margin adjustment: Right margin is automatically increased to accommodate the secondary axis labels

Domain Calculation

• When axisSecondary.domain is provided, it's used directly
• When omitted, the domain is calculated from symbol values using d3.extent()
• If no symbol values exist, defaults to [0, symbolMaxFallback ?? 1]

Legend Context

Sometimes the legend by itself doesn't fully explain everything. Use the legend context to help the reader understand the chart.