ComposedChart

const days = ["Mon 6", "Tue 7", "Wed 8", "Thu 9", "Fri 10", "Sat 11", "Sun 12", "Mon 13", "Tue 14", "Wed 15", "Thu 16", "Fri 17"] as const;
 
function layer(id: string, kind: "bar" | "line", name: string, values: readonly number[]) {
  return {
    id,
    kind,
    name,
    data: values.map((y, x) => ({ x, y, label: days[x] })),
  };
}
 
const composedChartFixture = {
  id: "composed-chart",
  layers: [
    layer("orders", "bar", "Orders received", [420, 468, 512, 556, 603, 578, 641, 662, 704, 738, 771, 812]),
    layer("fulfilled", "line", "Orders fulfilled", [398, 444, 486, 531, 569, 552, 607, 628, 671, 702, 736, 774]),
  ],
  ariaLabel: "Orders received and fulfilled each day, 6 to 17 July 2026",
  tooltip: true,
  legend: true,
};
 
import { ComposedChart } from "@grassroot/charts-react";
 
export default function ComposedChartDemo() {
  return (
    <div>
      <ComposedChart {...composedChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const days = ["Mon 6", "Tue 7", "Wed 8", "Thu 9", "Fri 10", "Sat 11", "Sun 12", "Mon 13", "Tue 14", "Wed 15", "Thu 16", "Fri 17"] as const;
 
function layer(id: string, kind: "bar" | "line", name: string, values: readonly number[]) {
  return {
    id,
    kind,
    name,
    data: values.map((y, x) => ({ x, y, label: days[x] })),
  };
}
 
const composedChartFixture = {
  id: "composed-chart",
  layers: [
    layer("orders", "bar", "Orders received", [420, 468, 512, 556, 603, 578, 641, 662, 704, 738, 771, 812]),
    layer("fulfilled", "line", "Orders fulfilled", [398, 444, 486, 531, 569, 552, 607, 628, 671, 702, 736, 774]),
  ],
  ariaLabel: "Orders received and fulfilled each day, 6 to 17 July 2026",
  tooltip: true,
  legend: true,
};
 
import { ComposedChart } from "@grassroot/charts-vue";
</script>
<template><ComposedChart v-bind="composedChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const days = ["Mon 6", "Tue 7", "Wed 8", "Thu 9", "Fri 10", "Sat 11", "Sun 12", "Mon 13", "Tue 14", "Wed 15", "Thu 16", "Fri 17"] as const;
 
function layer(id: string, kind: "bar" | "line", name: string, values: readonly number[]) {
  return {
    id,
    kind,
    name,
    data: values.map((y, x) => ({ x, y, label: days[x] })),
  };
}
 
const composedChartFixture = {
  id: "composed-chart",
  layers: [
    layer("orders", "bar", "Orders received", [420, 468, 512, 556, 603, 578, 641, 662, 704, 738, 771, 812]),
    layer("fulfilled", "line", "Orders fulfilled", [398, 444, 486, 531, 569, 552, 607, 628, 671, 702, 736, 774]),
  ],
  ariaLabel: "Orders received and fulfilled each day, 6 to 17 July 2026",
  tooltip: true,
  legend: true,
};
 
import { GrassrootComposedChart } from "@grassroot/charts-angular";
@Component({
  selector: "app-composed-chart-chart-demo",
  standalone: true,
  imports: [GrassrootComposedChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-composed-chart
    [layers]="fixture.layers"
    [ariaLabel]="fixture.ariaLabel"
    [tooltip]="fixture.tooltip"
    [legend]="fixture.legend"
  />`,
})
export class ComposedChartDemoComponent {
  readonly fixture = composedChartFixture;
}
export default ComposedChartDemoComponent;

<script lang="ts">
  const days = ["Mon 6", "Tue 7", "Wed 8", "Thu 9", "Fri 10", "Sat 11", "Sun 12", "Mon 13", "Tue 14", "Wed 15", "Thu 16", "Fri 17"] as const;
 
  function layer(id: string, kind: "bar" | "line", name: string, values: readonly number[]) {
    return {
      id,
      kind,
      name,
      data: values.map((y, x) => ({ x, y, label: days[x] })),
    };
  }
 
  const composedChartFixture = {
    id: "composed-chart",
    layers: [
      layer("orders", "bar", "Orders received", [420, 468, 512, 556, 603, 578, 641, 662, 704, 738, 771, 812]),
      layer("fulfilled", "line", "Orders fulfilled", [398, 444, 486, 531, 569, 552, 607, 628, 671, 702, 736, 774]),
    ],
    ariaLabel: "Orders received and fulfilled each day, 6 to 17 July 2026",
    tooltip: true,
    legend: true,
  };
 
  import { ComposedChart } from "@grassroot/charts-svelte";
</script>
 
<ComposedChart {...composedChartFixture} />

/** @jsxImportSource solid-js */
const days = ["Mon 6", "Tue 7", "Wed 8", "Thu 9", "Fri 10", "Sat 11", "Sun 12", "Mon 13", "Tue 14", "Wed 15", "Thu 16", "Fri 17"] as const;
 
function layer(id: string, kind: "bar" | "line", name: string, values: readonly number[]) {
  return {
    id,
    kind,
    name,
    data: values.map((y, x) => ({ x, y, label: days[x] })),
  };
}
 
const composedChartFixture = {
  id: "composed-chart",
  layers: [
    layer("orders", "bar", "Orders received", [420, 468, 512, 556, 603, 578, 641, 662, 704, 738, 771, 812]),
    layer("fulfilled", "line", "Orders fulfilled", [398, 444, 486, 531, 569, 552, 607, 628, 671, 702, 736, 774]),
  ],
  ariaLabel: "Orders received and fulfilled each day, 6 to 17 July 2026",
  tooltip: true,
  legend: true,
};
 
import { ComposedChart } from "@grassroot/charts-solid";
export default function ComposedChartDemo() {
  return <ComposedChart {...composedChartFixture} />;
}