Stacked Lines

import { LineGraph } from 'cx/charts';

Stacked line charts display multiple data series stacked on top of each other. Set stacked to true on each LineGraph to enable stacking. Combine with area to fill the area under each line.

Click legend entries to toggle series visibility. Use the checkbox to toggle between stacked and regular view.

 <div controller={PageController}>
  <Legend />
  <Svg style="width: 500px; height: 300px; border: 1px dashed #ddd">
    <Chart
      margin="20 20 40 50"
      axes={{
        x: <NumericAxis />,
        y: <NumericAxis vertical />,
      }}
    >
      <Rectangle fill="white" />
      <Gridlines />
      <LineGraph
        name="Series 1"
        data={m.data}
        colorIndex={0}
        yField="y1"
        area={m.stacked}
        stacked={m.stacked}
        active={m.line1Active}
      />
      <LineGraph
        name="Series 2"
        data={m.data}
        colorIndex={5}
        yField="y2"
        area={m.stacked}
        stacked={m.stacked}
        active={m.line2Active}
      />
      <LineGraph
        name="Series 3"
        data={m.data}
        colorIndex={10}
        yField="y3"
        area={m.stacked}
        stacked={m.stacked}
        active={m.line3Active}
      />
    </Chart>
  </Svg>
  <div style="margin-top: 8px">
    <Checkbox value={m.stacked}>Stacked</Checkbox>
  </div>
</div> 
 class PageController extends Controller {
  onInit() {
    let y1 = 300,
      y2 = 200,
      y3 = 100;
    this.store.set(
      m.data,
      Array.from({ length: 50 }, (_, i) => ({
        x: i * 4,
        y1: (y1 = y1 + (Math.random() - 0.5) * 30),
        y2: (y2 = y2 + (Math.random() - 0.5) * 30),
        y3: (y3 = y3 + (Math.random() - 0.5) * 30),
      })),
    );
    this.store.set(m.stacked, true);
    this.store.set(m.line1Active, true);
    this.store.set(m.line2Active, true);
    this.store.set(m.line3Active, true);
  }
} 
 interface Model {
  data: { x: number; y1: number; y2: number; y3: number }[];
  stacked: boolean;
  line1Active: boolean;
  line2Active: boolean;
  line3Active: boolean;
}

const m = createModel<Model>(); 
 import { Svg, Rectangle } from "cx/svg";
import { Chart, NumericAxis, Gridlines, LineGraph, Legend } from "cx/charts";
import { createModel } from "cx/data";
import { Controller } from "cx/ui";
import { Checkbox } from "cx/widgets"; 

Series 1

Series 2

Series 3

Stacked

Configuration

Property	Type	Description
`stacked`	`boolean`	Set to `true` to stack this series on top of previous ones.
`area`	`boolean`	Set to `true` to fill the area under the line.
`stack`	`string`	Name of the stack group. Default is `"stack"`.
`active`	`boolean`	Binding to control visibility. Works with Legend interaction.