HorizontalBarChart

import { HorizontalBarChart } from "@grassroot/charts-react"; 
const endpointData = [
  { label: "/v2/ledger", value: 940, color: "var(--accent)" },
  { label: "/v2/billing", value: 720, color: "var(--vs-success)" },
  { label: "/v2/auth", value: 610, color: "var(--vs-warning)" },
  { label: "/v2/edge", value: 430, color: "var(--vs-error)" },
  { label: "/v2/search", value: 280, color: "var(--vs-info)" },
];
 
<HorizontalBarChart animation={{ durationMs: 560, staggerMs: 44 }} ariaLabel="Top endpoints by calls per minute" valueSuffix="/min" data={endpointData} />

<script setup lang="ts">
import { HorizontalBarChart } from "@grassroot/charts-vue";
 
const endpointData = [
  { label: "/v2/ledger", value: 940, color: "var(--accent)" },
  { label: "/v2/billing", value: 720, color: "var(--vs-success)" },
  { label: "/v2/auth", value: 610, color: "var(--vs-warning)" },
  { label: "/v2/edge", value: 430, color: "var(--vs-error)" },
  { label: "/v2/search", value: 280, color: "var(--vs-info)" },
];
</script>
 
<template>
  <HorizontalBarChart :animation='{ durationMs: 560, staggerMs: 44 }' ariaLabel="Top endpoints by calls per minute" valueSuffix="/min" :data='endpointData' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootHorizontalBarChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-horizontal-bar-chart-chart-demo",
  standalone: true,
  imports: [GrassrootHorizontalBarChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-horizontal-bar-chart [animation]='{ durationMs: 560, staggerMs: 44 }' ariaLabel="Top endpoints by calls per minute" valueSuffix="/min" [data]='endpointData' />`,
})
export class HorizontalBarChartDemoComponent {
  readonly endpointData = [
    { label: "/v2/ledger", value: 940, color: "var(--accent)" },
    { label: "/v2/billing", value: 720, color: "var(--vs-success)" },
    { label: "/v2/auth", value: 610, color: "var(--vs-warning)" },
    { label: "/v2/edge", value: 430, color: "var(--vs-error)" },
    { label: "/v2/search", value: 280, color: "var(--vs-info)" },
  ];
}
 
export default HorizontalBarChartDemoComponent;

<script lang="ts">
  import { HorizontalBarChart } from "@grassroot/charts-svelte";
 
  const endpointData = [
    { label: "/v2/ledger", value: 940, color: "var(--accent)" },
    { label: "/v2/billing", value: 720, color: "var(--vs-success)" },
    { label: "/v2/auth", value: 610, color: "var(--vs-warning)" },
    { label: "/v2/edge", value: 430, color: "var(--vs-error)" },
    { label: "/v2/search", value: 280, color: "var(--vs-info)" },
  ];
</script>
 
<HorizontalBarChart animation={{ durationMs: 560, staggerMs: 44 }} ariaLabel="Top endpoints by calls per minute" valueSuffix="/min" data={endpointData} />

/** @jsxImportSource solid-js */
import { HorizontalBarChart } from "@grassroot/charts-solid";
 
const endpointData = [
  { label: "/v2/ledger", value: 940, color: "var(--accent)" },
  { label: "/v2/billing", value: 720, color: "var(--vs-success)" },
  { label: "/v2/auth", value: 610, color: "var(--vs-warning)" },
  { label: "/v2/edge", value: 430, color: "var(--vs-error)" },
  { label: "/v2/search", value: 280, color: "var(--vs-info)" },
];
 
export default function HorizontalBarChartDemo() {
  return <HorizontalBarChart animation={{ durationMs: 560, staggerMs: 44 }} ariaLabel="Top endpoints by calls per minute" valueSuffix="/min" data={endpointData} />;
}