Struct ChartCompositionProps 

pub struct ChartCompositionProps {
    pub variant: ChartCompositionVariant,
    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 ChartComposition component.

Wrap your data definitions in a chart container, then stack plot, axis, and interaction components as children.

Explicit chart_type on each [SeriesDef] tells plot layers which geometry to render; child order controls z-order (bars beneath lines, annotations on top).

When to use

Build mixed-type dashboards by placing explicit plot children inside ChartContainer. Each [SeriesDef] must declare chart_type; child order controls z-order.

Usage

1. Place ChartContainer at the root with series, axes, and optional dataset binding.
2. Add plot children (BarPlot, LinePlot, …) with required chart_type on each series.
3. Wrap plots in PlotClip when marks extend past plot bounds.
4. Add ChartCustomBaseline or custom SVG using scale hooks for annotations.

Best Practices

Do’s

• Place BarPlot before LinePlot when bars should sit beneath lines.
• Use unique clip path ids per chart instance (orb-clip-* prefix).
• Prefer [ResponsiveChartContainer] for dashboard tiles that fill parent width.
• Respect [ChartCompositionOrder]: first plot child inside PlotClip renders on the bottom.

Don’ts

• Do not omit chart_type on series in composition mode — inference is disabled.
• Do not mix composition and convenience *Chart wrappers on the same surface.
• Do not place legend or tooltip as composition children — configure them via container props.

Examples

Mixed bar and line chart

Revenue bars with a target line overlay, clipped to the plot area. Demonstrates z-order, mixed chart_type series, and PlotClip for overflow control.

use crate::ChartComposition;
use crate::preview::fixtures::{full_grid, mixed_bar_line_series, mixed_bar_line_x_axis, revenue_y_axis};
view! {
    <div data-testid="chart-composition-preview">
        <ChartComposition
            variant=ChartCompositionVariant::MixedBarLine
            series=mixed_bar_line_series()
            x_axis=vec![mixed_bar_line_x_axis()]
            y_axis=vec![revenue_y_axis()]
            grid=full_grid()
            width=560.0
            height=320.0
        />
    </div>
}

Custom SVG layer via hooks

Dashed revenue baseline using [use_drawing_area] and [use_y_scale]. Use when annotations must stay aligned to data coordinates on resize.

use crate::ChartComposition;
use crate::preview::fixtures::{quarter_x_axis, revenue_series, revenue_y_axis};
view! {
    <div data-testid="chart-composition-custom-layer-preview">
        <ChartComposition
            variant=ChartCompositionVariant::CustomLayer
            series=vec![revenue_series()]
            x_axis=vec![quarter_x_axis()]
            y_axis=vec![revenue_y_axis()]
            width=520.0
            height=320.0
        />
    </div>
}

Optional Props

• variant: ChartCompositionVariant
  • Which documented composition example to render.
• series: Vec<crate::SeriesDef>
  • Series definitions with explicit chart_type per entry.
• 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: ChartCompositionVariant

Which documented composition example to render.

series: Vec<SeriesDef>

Series definitions with explicit chart_type per entry.

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 ChartCompositionProps

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

Create a builder for building ChartCompositionProps. 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 ChartCompositionProps.

Trait Implementations

impl Props for ChartCompositionProps

type Builder = ChartCompositionPropsBuilder

fn builder() -> Self::Builder