Component library

Showing 2 components in the expressive deck with role chart.

  • <ColumnChartSlide>

    expressiveChartPresentation

    Vertical bar chart for comparing categories on a 0–100 scale; bars animate in on slide enter (client).

    When to use: Quarterly KPIs, segment growth, or survey scores where each bar is an independent category. Prefer StatBarChart when you need multi-series report charts.

    Preview

    Analytics Core

    Quarterly Growth Metrics

    Fiscal performance across four sectors

    78
    Alpha
    92
    Beta
    64
    Gamma
    85
    Delta
    56
    Epsilon
    PropTypeNotes
    labelstringOptional. HUD pill above the title.
    titlestringOptional. Section headline (cyan).
    subtitlestringOptional. Mono pink subtitle under the title.
    items{ label: string; value: number; display?: string; tone?: "cyan" | "pink" | "yellow" }[]Required. Bars; value is 0–100 height percentage.
    tweenobjectOptional. Optional GSAP vars for bar growth.

    Examples

    <ColumnChartSlide
  label="Analytics Core"
  title="Quarterly Growth Metrics"
  subtitle="Fiscal performance across four sectors"
  items={[
    { label: "Alpha", value: 78 },
    { label: "Beta", value: 92 },
    { label: "Gamma", value: 64 },
    { label: "Delta", value: 85 },
    { label: "Epsilon", value: 56 }
  ]}
/>

  • <RankedBarSlide>

    expressiveChartPresentation

    Horizontal ranked bar chart for share or allocation breakdown; fills animate in on slide enter (client).

    When to use: Budget allocation, capacity mix, or portfolio weight by line item. Each row is one label with a 0–100 fill percentage.

    Preview

    System Load

    Resource Allocation

    Percentage distribution across operational units

    Compute
    88%
    Storage
    72%
    Network
    95%
    Memory
    61%
    Graphics
    44%
    PropTypeNotes
    labelstringOptional. HUD pill above the title.
    titlestringOptional. Section headline.
    subtitlestringOptional. Supporting line under the title.
    labelAccent"yellow" | "cyan" | "pink"Optional. Default: yellow. AccentEyebrow text colour.Values: yellow, cyan, pink
    items{ label: string; value: number; display?: string; tone?: "navy" | "cyan" | "pink" }[]Required. Rows; value is 0–100 fill percentage.
    tweenobjectOptional. Optional GSAP vars for fill growth.

    Examples

    <RankedBarSlide
  label="System Load"
  title="Resource Allocation"
  subtitle="Percentage distribution across operational units"
  items={[
    { label: "Compute", value: 88 },
    { label: "Storage", value: 72 },
    { label: "Network", value: 95 },
    { label: "Memory", value: 61 },
    { label: "Graphics", value: 44 }
  ]}
/>