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:
Series stacking is a feature available on all Bar, Line and Bar & Line charts with more than one series.
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 type | Bar chart | Line chart |
Side-by-side | ![]() | ![]() |
Stacked | ![]() | ![]() |
Stacked100 | ![]() | ![]() |
Side
typeIn side-by-side mode, data for each series is rendered independently of other series.
|
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
typeIn stacked mode, visible series are stacked on top of each other, in the order being specified in the config file.
|
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
typeWith 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.
|
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.
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:
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.
stackNegativeValuesToBaseline
is set to true (default option):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.
stackNegativeValuesToBaseline
is set to 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.