No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Series Stacking

Series stacking is a feature available on all Bar, Line and Bar & Line charts with more than one series.

Stacked types

There are three stacked types: side-by-side (WebChartStackedKinds.Side), stacked (WebChartStackedKinds.Stacked), and stacked100 (WebChartStackedKinds.Stacked100), with side-by-side being the default value if not specified.

stackedType is an optional property of Bar (WebChartBarChartSeries) and Line (WebChartLineChartSeries) series, which are the series supported by Bar, Line and Combo bar+line charts.

Stacked typeBar chartLine chart
Side-by-sideStacking Bar Side by SideStacking Line Side by Side
StackedStacking Bar StackedStacking Line Stacked
Stacked100Stacking Bar Stacked100Stacking Line Stacked100

Side type

In side-by-side mode, data for each series is rendered independently of other series.

Stacking SBS 1 | Stacking SBS 2

As seen above, for Bar series, each series is displayed as columns next to other series. Columns with 0 value still occupies its own space with "0" value displayed (if option to show data labels is turned on). Columns with null, undefined, or no value still have empty space reserved for it, but no data labels will be shown.

For Line series, markers for each series are drawn relative to the axes. Each marker represents a data value ("0" included). For null, undefined, or no value, no marker will be displayed.

Stacked type

In stacked mode, visible series are stacked on top of each other, in the order being specified in the config file.

Stacking Stacked 1 | Stacking Stacked 2

For Bar series, when option to show data labels is turned on, data labels for columns with "0" value will not be shown, same as for when it is null, undefined, or no value.

For Line series, when option to show data labels is turned on, unless the data has no value, null or undefined, data labels, including "0", "0%", or "100%" values, will be shown.

Stacked100 type

With stacked100 mode, all visible series of the same type (Line or Bar) will be stacked to fill up 100% of a column. Data values are calculated and converted to percentage internally.

Stacking Stacked100 1 | Stacking Stacked100 2

For Bar series, when option to show data labels is turned on, data labels for columns with "0" value will not be shown, same as for when it's null, undefined, or no data.

For Line series, when option to show data labels is turned on, unless the data has no value, null or undefined, data labels, including "0", "0%", or "100%" values, will be shown.

Stacking rules for Bar & Line chart

Bar & Line charts support, in general, all features that are supported by Bar and Line charts. In term of stacking, below are a few rules to keep in mind:

  • Only series of the same type can be stacked together.
  • Smooth lines can be stacked with smooth lines.
  • Straight lines can be stacked with straight lines.

Stacked to negative values (for Line chart)

When a multi-series Line chart with data series containing negative values is stacked, the series with the negative value will be stacked in relation to other series within the same stack, in two different ways. The optional boolean property stackNegativeValuesToBaseline of a WebChartLineChartSeries determines the outcome.

When stackNegativeValuesToBaseline is set to true (default option):

Stacked to negative values: true

As illustrated in the image above, negative values (yellow series [2005,2007]) will stack on the base line of zero. The series stacked above it (green series) will treat the negative values from the yellow series as zero, hence the flat line from 2004 to 2008.

When stackNegativeValuesToBaseline is set to false:

Stacked to negative values: false

As illustrated in the image above, negative values (yellow series [2005, 2007]) will stack relative to the value in the previous series (blue series [2005, 2007]). Further, the series stacked above (green series) will stack relative to the yellow series.