HorizontalBarChart

const horizontalBarChartFixture = {
  id: "horizontal-bar-chart",
  data: [
    { label: "Returns", value: 27.3 },
    { label: "Billing", value: 18.6 },
    { label: "Order changes", value: 11.4 },
    { label: "Technical support", value: 8.7 },
    { label: "Account access", value: 5.2 },
    { label: "Shipping delay", value: 4.8 },
    { label: "Product defect", value: 4.1 },
    { label: "Cancellation", value: 3.6 },
    { label: "Warranty", value: 2.9 },
    { label: "Gift cards", value: 1.8 },
  ],
  ariaLabel: "Median support ticket resolution time in hours by queue, July 2026",
  tooltip: true,
  legend: false,
};
 
import { HorizontalBarChart } from "@grassroot/charts-react";
 
export default function HorizontalBarChartDemo() {
  return (
    <div>
      <HorizontalBarChart {...horizontalBarChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const horizontalBarChartFixture = {
  id: "horizontal-bar-chart",
  data: [
    { label: "Returns", value: 27.3 },
    { label: "Billing", value: 18.6 },
    { label: "Order changes", value: 11.4 },
    { label: "Technical support", value: 8.7 },
    { label: "Account access", value: 5.2 },
    { label: "Shipping delay", value: 4.8 },
    { label: "Product defect", value: 4.1 },
    { label: "Cancellation", value: 3.6 },
    { label: "Warranty", value: 2.9 },
    { label: "Gift cards", value: 1.8 },
  ],
  ariaLabel: "Median support ticket resolution time in hours by queue, July 2026",
  tooltip: true,
  legend: false,
};
 
import { HorizontalBarChart } from "@grassroot/charts-vue";
</script>
<template><HorizontalBarChart v-bind="horizontalBarChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const horizontalBarChartFixture = {
  id: "horizontal-bar-chart",
  data: [
    { label: "Returns", value: 27.3 },
    { label: "Billing", value: 18.6 },
    { label: "Order changes", value: 11.4 },
    { label: "Technical support", value: 8.7 },
    { label: "Account access", value: 5.2 },
    { label: "Shipping delay", value: 4.8 },
    { label: "Product defect", value: 4.1 },
    { label: "Cancellation", value: 3.6 },
    { label: "Warranty", value: 2.9 },
    { label: "Gift cards", value: 1.8 },
  ],
  ariaLabel: "Median support ticket resolution time in hours by queue, July 2026",
  tooltip: true,
  legend: false,
};
 
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
    [data]="fixture.data"
    [ariaLabel]="fixture.ariaLabel"
    [tooltip]="fixture.tooltip"
    [legend]="fixture.legend"
  />`,
})
export class HorizontalBarChartDemoComponent {
  readonly fixture = horizontalBarChartFixture;
}
export default HorizontalBarChartDemoComponent;

<script lang="ts">
  const horizontalBarChartFixture = {
    id: "horizontal-bar-chart",
    data: [
      { label: "Returns", value: 27.3 },
      { label: "Billing", value: 18.6 },
      { label: "Order changes", value: 11.4 },
      { label: "Technical support", value: 8.7 },
      { label: "Account access", value: 5.2 },
      { label: "Shipping delay", value: 4.8 },
      { label: "Product defect", value: 4.1 },
      { label: "Cancellation", value: 3.6 },
      { label: "Warranty", value: 2.9 },
      { label: "Gift cards", value: 1.8 },
    ],
    ariaLabel: "Median support ticket resolution time in hours by queue, July 2026",
    tooltip: true,
    legend: false,
  };
 
  import { HorizontalBarChart } from "@grassroot/charts-svelte";
</script>
 
<HorizontalBarChart {...horizontalBarChartFixture} />

/** @jsxImportSource solid-js */
const horizontalBarChartFixture = {
  id: "horizontal-bar-chart",
  data: [
    { label: "Returns", value: 27.3 },
    { label: "Billing", value: 18.6 },
    { label: "Order changes", value: 11.4 },
    { label: "Technical support", value: 8.7 },
    { label: "Account access", value: 5.2 },
    { label: "Shipping delay", value: 4.8 },
    { label: "Product defect", value: 4.1 },
    { label: "Cancellation", value: 3.6 },
    { label: "Warranty", value: 2.9 },
    { label: "Gift cards", value: 1.8 },
  ],
  ariaLabel: "Median support ticket resolution time in hours by queue, July 2026",
  tooltip: true,
  legend: false,
};
 
import { HorizontalBarChart } from "@grassroot/charts-solid";
export default function HorizontalBarChartDemo() {
  return <HorizontalBarChart {...horizontalBarChartFixture} />;
}