BarChart

import { BarChart } from "@grassroot/charts-react"; <BarChart animation={{ durationMs: 520, staggerMs: 48 }} ariaLabel="Requests by region, last 7 days" tooltip legend={{ position: "top" }} data={[{ label: "us-east", value: 82 }, { label: "us-west", value: 64 }]} max={90} />

<script setup lang="ts">
import { BarChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <BarChart :animation='{ durationMs: 520, staggerMs: 48 }' ariaLabel="Requests by region, last 7 days" tooltip :legend='{ position: "top" }' :data='[{ label: "us-east", value: 82 }, { label: "us-west", value: 64 }]' :max='90' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootBarChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-bar-chart-chart-demo",
  standalone: true,
  imports: [GrassrootBarChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-bar-chart [animation]='{ durationMs: 520, staggerMs: 48 }' ariaLabel="Requests by region, last 7 days" tooltip [legend]='{ position: "top" }' [data]='[{ label: "us-east", value: 82 }, { label: "us-west", value: 64 }]' [max]='90' />`,
})
export class BarChartDemoComponent {
 
}
 
export default BarChartDemoComponent;

<script lang="ts">
  import { BarChart } from "@grassroot/charts-svelte";
</script>
 
<BarChart animation={{ durationMs: 520, staggerMs: 48 }} ariaLabel="Requests by region, last 7 days" tooltip legend={{ position: "top" }} data={[{ label: "us-east", value: 82 }, { label: "us-west", value: 64 }]} max={90} />

/** @jsxImportSource solid-js */
import { BarChart } from "@grassroot/charts-solid";
 
export default function BarChartDemo() {
  return <BarChart animation={{ durationMs: 520, staggerMs: 48 }} ariaLabel="Requests by region, last 7 days" tooltip legend={{ position: "top" }} data={[{ label: "us-east", value: 82 }, { label: "us-west", value: 64 }]} max={90} />;
}