Struct ChartStackingProps 

pub struct ChartStackingProps {
    pub variant: ChartStackingVariant,
    pub series: Vec<SeriesDef>,
    pub x_axis: Vec<AxisDef>,
    pub y_axis: Vec<AxisDef>,
    pub grid: GridConfig,
    pub width: f64,
    pub height: f64,
    pub class: MaybeProp<String>,
}

Props for the ChartStacking component.

Stack series when each category total is meaningful and segments show contribution.

Decision guide: Same stack_group id → stacked. Negative values → StackOffset::Diverging (bar default). Share of whole → StackOffset::Expand. Unsure about layer order → try StackOrder::Ascending.

When to use

Assign the same stack_group on multiple series to stack segments per category. Bar stacks default to [StackOffset::Diverging] for signed data; lines and areas default to [StackOffset::None].

Usage

1. Assign the same stack_group string on series that should stack per category.
2. Set stack_offset on any member — Diverging for signed bars, Expand for 100% stacks.
3. Set stack_order when layer sequence at the baseline matters.
4. Use ChartStacking preview variants to compare bar vs area stacking side by side.

Best Practices

Do’s

• Include zero in the value axis domain for diverging stacks with negatives.
• Use stack_order: Ascending when the smallest segment should anchor the baseline.
• Link to area-chart percent stacked example for normalized area stacks.

Don’ts

• Do not stack unrelated series — they must share categories and a stack group id.
• Do not use expand offset when absolute totals must remain readable.

Examples

Stacked bar chart (diverging default)

Three stacked segments per month including signed adjustments. Bar stacks default to diverging offset so negative segments mirror below the baseline.

use crate::ChartStacking;
use crate::preview::fixtures::{full_grid, revenue_y_axis, stacked_bar_series, stacked_bar_x_axis};
view! {
    <div data-testid="chart-stacking-preview">
        <ChartStacking
            variant=ChartStackingVariant::StackedBar
            series=stacked_bar_series()
            x_axis=vec![stacked_bar_x_axis()]
            y_axis=vec![revenue_y_axis()]
            grid=full_grid()
            width=560.0
            height=320.0
        />
    </div>
}

Stacked area chart

Multiple filled series sharing a stack group. Compare with area-chart-percent-preview when you need stack_offset: Expand normalization.

use crate::ChartStacking;
use crate::preview::fixtures::{full_grid, month_categories, quarter_x_axis, revenue_y_axis, stacked_area_series};
view! {
    <div data-testid="chart-stacking-area-preview">
        <ChartStacking
            variant=ChartStackingVariant::StackedArea
            series=stacked_area_series()
            x_axis=vec![{
                let mut a = quarter_x_axis();
                a.data = Some(month_categories());
                a
            }]
            y_axis=vec![revenue_y_axis()]
            grid=full_grid()
            width=560.0
            height=320.0
        />
    </div>
}

Optional Props

• variant: ChartStackingVariant
  • Which stacking example to render.
• series: Vec<crate::SeriesDef>
  • Series with shared stack_group identifiers.
• x_axis: Vec<crate::AxisDef>
  • X-axis definitions.
• y_axis: Vec<crate::AxisDef>
  • Y-axis definitions.
• grid: crate::GridConfig
  • Background grid configuration.
• width: f64
  • Chart width in pixels.
• height: f64
  • Chart height in pixels.
• class: impl Into<MaybeProp<String>>
  • Optional CSS class on the root element.

Fields

variant: ChartStackingVariant

Which stacking example to render.

series: Vec<SeriesDef>

Series with shared stack_group identifiers.

x_axis: Vec<AxisDef>

X-axis definitions.

y_axis: Vec<AxisDef>

Y-axis definitions.

grid: GridConfig

Background grid configuration.

width: f64

Chart width in pixels.

height: f64

Chart height in pixels.

class: MaybeProp<String>

Optional CSS class on the root element.

Implementations

impl ChartStackingProps

pub fn builder() -> ChartStackingPropsBuilder<((), (), (), (), (), (), (), ())>

Create a builder for building ChartStackingProps. On the builder, call .variant(...)(optional), .series(...)(optional), .x_axis(...)(optional), .y_axis(...)(optional), .grid(...)(optional), .width(...)(optional), .height(...)(optional), .class(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of ChartStackingProps.

Trait Implementations

impl Props for ChartStackingProps

type Builder = ChartStackingPropsBuilder

fn builder() -> Self::Builder