StackedBarChart

import { StackedBarChart } from "@grassroot/charts-react"; 
const deployLabels = ["w1", "w2", "w3", "w4", "w5", "w6", "w7", "w8"];
const deploySeries = [
  { name: "success", color: "var(--vs-success)" },
  { name: "rollback", color: "var(--vs-warning)" },
  { name: "failed", color: "var(--vs-error)" },
];
const deployValues = [
  [8, 1, 0],
  [11, 2, 1],
  [9, 1, 0],
  [13, 0, 1],
  [10, 2, 0],
  [14, 1, 1],
  [12, 1, 0],
  [15, 2, 1],
];
 
<StackedBarChart animation={{ durationMs: 560, staggerMs: 44 }} labels={deployLabels} series={deploySeries} values={deployValues} />

<script setup lang="ts">
import { StackedBarChart } from "@grassroot/charts-vue";
 
const deployLabels = ["w1", "w2", "w3", "w4", "w5", "w6", "w7", "w8"];
const deploySeries = [
  { name: "success", color: "var(--vs-success)" },
  { name: "rollback", color: "var(--vs-warning)" },
  { name: "failed", color: "var(--vs-error)" },
];
const deployValues = [
  [8, 1, 0],
  [11, 2, 1],
  [9, 1, 0],
  [13, 0, 1],
  [10, 2, 0],
  [14, 1, 1],
  [12, 1, 0],
  [15, 2, 1],
];
</script>
 
<template>
  <StackedBarChart :animation='{ durationMs: 560, staggerMs: 44 }' :labels='deployLabels' :series='deploySeries' :values='deployValues' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootStackedBarChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-stacked-bar-chart-chart-demo",
  standalone: true,
  imports: [GrassrootStackedBarChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-stacked-bar-chart [animation]='{ durationMs: 560, staggerMs: 44 }' [labels]='deployLabels' [series]='deploySeries' [values]='deployValues' />`,
})
export class StackedBarChartDemoComponent {
  readonly deployLabels = ["w1", "w2", "w3", "w4", "w5", "w6", "w7", "w8"];
  readonly deploySeries = [
    { name: "success", color: "var(--vs-success)" },
    { name: "rollback", color: "var(--vs-warning)" },
    { name: "failed", color: "var(--vs-error)" },
  ];
  readonly deployValues = [
    [8, 1, 0],
    [11, 2, 1],
    [9, 1, 0],
    [13, 0, 1],
    [10, 2, 0],
    [14, 1, 1],
    [12, 1, 0],
    [15, 2, 1],
  ];
}
 
export default StackedBarChartDemoComponent;

<script lang="ts">
  import { StackedBarChart } from "@grassroot/charts-svelte";
 
  const deployLabels = ["w1", "w2", "w3", "w4", "w5", "w6", "w7", "w8"];
  const deploySeries = [
    { name: "success", color: "var(--vs-success)" },
    { name: "rollback", color: "var(--vs-warning)" },
    { name: "failed", color: "var(--vs-error)" },
  ];
  const deployValues = [
    [8, 1, 0],
    [11, 2, 1],
    [9, 1, 0],
    [13, 0, 1],
    [10, 2, 0],
    [14, 1, 1],
    [12, 1, 0],
    [15, 2, 1],
  ];
</script>
 
<StackedBarChart animation={{ durationMs: 560, staggerMs: 44 }} labels={deployLabels} series={deploySeries} values={deployValues} />

/** @jsxImportSource solid-js */
import { StackedBarChart } from "@grassroot/charts-solid";
 
const deployLabels = ["w1", "w2", "w3", "w4", "w5", "w6", "w7", "w8"];
const deploySeries = [
  { name: "success", color: "var(--vs-success)" },
  { name: "rollback", color: "var(--vs-warning)" },
  { name: "failed", color: "var(--vs-error)" },
];
const deployValues = [
  [8, 1, 0],
  [11, 2, 1],
  [9, 1, 0],
  [13, 0, 1],
  [10, 2, 0],
  [14, 1, 1],
  [12, 1, 0],
  [15, 2, 1],
];
 
export default function StackedBarChartDemo() {
  return <StackedBarChart animation={{ durationMs: 560, staggerMs: 44 }} labels={deployLabels} series={deploySeries} values={deployValues} />;
}