BarChart

const barChartFixture = {
  id: "bar-chart",
  data: [
    { label: "Organic", value: 1842 },
    { label: "Paid search", value: 1376 },
    { label: "Direct", value: 1128 },
    { label: "Partners", value: 746 },
    { label: "Referrals", value: 512 },
    { label: "Email", value: 468 },
    { label: "Social", value: 391 },
    { label: "Affiliate", value: 274 },
    { label: "Display", value: 218 },
    { label: "Events", value: 164 },
    { label: "Podcast", value: 121 },
    { label: "Community", value: 86 },
  ],
  max: 2000,
  ariaLabel: "Qualified leads by acquisition channel, Q2 2026",
  animation: { durationMs: 520, staggerMs: 48 },
  tooltip: true,
  legend: { position: "top" },
} satisfies {
  id: string;
  data: Array<{ label: string; value: number }>;
  max: number;
  ariaLabel: string;
  animation: { durationMs: number; staggerMs: number };
  tooltip: boolean;
  legend: { position: "top" | "bottom" | "left" | "right" };
};
 
import { BarChart } from "@grassroot/charts-react";
 
export default function BarChartDemo() {
  return (
    <div>
      <BarChart {...barChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const barChartFixture = {
  id: "bar-chart",
  data: [
    { label: "Organic", value: 1842 },
    { label: "Paid search", value: 1376 },
    { label: "Direct", value: 1128 },
    { label: "Partners", value: 746 },
    { label: "Referrals", value: 512 },
    { label: "Email", value: 468 },
    { label: "Social", value: 391 },
    { label: "Affiliate", value: 274 },
    { label: "Display", value: 218 },
    { label: "Events", value: 164 },
    { label: "Podcast", value: 121 },
    { label: "Community", value: 86 },
  ],
  max: 2000,
  ariaLabel: "Qualified leads by acquisition channel, Q2 2026",
  animation: { durationMs: 520, staggerMs: 48 },
  tooltip: true,
  legend: { position: "top" },
} satisfies {
  id: string;
  data: Array<{ label: string; value: number }>;
  max: number;
  ariaLabel: string;
  animation: { durationMs: number; staggerMs: number };
  tooltip: boolean;
  legend: { position: "top" | "bottom" | "left" | "right" };
};
 
import { BarChart } from "@grassroot/charts-vue";
</script>
<template><BarChart v-bind="barChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const barChartFixture = {
  id: "bar-chart",
  data: [
    { label: "Organic", value: 1842 },
    { label: "Paid search", value: 1376 },
    { label: "Direct", value: 1128 },
    { label: "Partners", value: 746 },
    { label: "Referrals", value: 512 },
    { label: "Email", value: 468 },
    { label: "Social", value: 391 },
    { label: "Affiliate", value: 274 },
    { label: "Display", value: 218 },
    { label: "Events", value: 164 },
    { label: "Podcast", value: 121 },
    { label: "Community", value: 86 },
  ],
  max: 2000,
  ariaLabel: "Qualified leads by acquisition channel, Q2 2026",
  animation: { durationMs: 520, staggerMs: 48 },
  tooltip: true,
  legend: { position: "top" },
} satisfies {
  id: string;
  data: Array<{ label: string; value: number }>;
  max: number;
  ariaLabel: string;
  animation: { durationMs: number; staggerMs: number };
  tooltip: boolean;
  legend: { position: "top" | "bottom" | "left" | "right" };
};
 
import { GrassrootBarChart } from "@grassroot/charts-angular";
@Component({
  selector: "app-bar-chart-chart-demo",
  standalone: true,
  imports: [GrassrootBarChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-bar-chart
    [data]="fixture.data"
    [max]="fixture.max"
    [ariaLabel]="fixture.ariaLabel"
    [animation]="fixture.animation"
    [tooltip]="fixture.tooltip"
    [legend]="fixture.legend"
  />`,
})
export class BarChartDemoComponent {
  readonly fixture = barChartFixture;
}
export default BarChartDemoComponent;

<script lang="ts">
  const barChartFixture = {
    id: "bar-chart",
    data: [
      { label: "Organic", value: 1842 },
      { label: "Paid search", value: 1376 },
      { label: "Direct", value: 1128 },
      { label: "Partners", value: 746 },
      { label: "Referrals", value: 512 },
      { label: "Email", value: 468 },
      { label: "Social", value: 391 },
      { label: "Affiliate", value: 274 },
      { label: "Display", value: 218 },
      { label: "Events", value: 164 },
      { label: "Podcast", value: 121 },
      { label: "Community", value: 86 },
    ],
    max: 2000,
    ariaLabel: "Qualified leads by acquisition channel, Q2 2026",
    animation: { durationMs: 520, staggerMs: 48 },
    tooltip: true,
    legend: { position: "top" },
  } satisfies {
    id: string;
    data: Array<{ label: string; value: number }>;
    max: number;
    ariaLabel: string;
    animation: { durationMs: number; staggerMs: number };
    tooltip: boolean;
    legend: { position: "top" | "bottom" | "left" | "right" };
  };
 
  import { BarChart } from "@grassroot/charts-svelte";
</script>
 
<BarChart {...barChartFixture} />

/** @jsxImportSource solid-js */
const barChartFixture = {
  id: "bar-chart",
  data: [
    { label: "Organic", value: 1842 },
    { label: "Paid search", value: 1376 },
    { label: "Direct", value: 1128 },
    { label: "Partners", value: 746 },
    { label: "Referrals", value: 512 },
    { label: "Email", value: 468 },
    { label: "Social", value: 391 },
    { label: "Affiliate", value: 274 },
    { label: "Display", value: 218 },
    { label: "Events", value: 164 },
    { label: "Podcast", value: 121 },
    { label: "Community", value: 86 },
  ],
  max: 2000,
  ariaLabel: "Qualified leads by acquisition channel, Q2 2026",
  animation: { durationMs: 520, staggerMs: 48 },
  tooltip: true,
  legend: { position: "top" },
} satisfies {
  id: string;
  data: Array<{ label: string; value: number }>;
  max: number;
  ariaLabel: string;
  animation: { durationMs: number; staggerMs: number };
  tooltip: boolean;
  legend: { position: "top" | "bottom" | "left" | "right" };
};
 
import { BarChart } from "@grassroot/charts-solid";
export default function BarChartDemo() {
  return <BarChart {...barChartFixture} />;
}