> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bar

> Bar chart implementation for @servicetitan/anvil2-charts-kit.

A bar chart shows distribution within a single series. Each bar is a variable, so `variant` assigns color per datum. Use `monochrome` for four or fewer ordered variables, and `categorical` for five or more.

* Design rules: [Bar charts](https://anvil.servicetitan.com/docs/data-visualization/bar-charts.md)
* Shared API / selection / tooltips / palettes: [Chart component](https://anvil.servicetitan.com/docs/charts/web/chart.md)

***

## Minimal option

Define structure and data in the option. The palette, corner radius, and hover behavior come from `variant`. Orientation follows the axis layout rather than a `Chart` prop: the `category` axis holds the labels and the `value` axis holds the measurements.

charts-react-bar

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/charts-react-bar?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Chart, type EChartsOption } from "@servicetitan/anvil2-charts-kit";
import "@servicetitan/anvil2-charts-kit/styles.css";

function App() {
  const option: EChartsOption = {
    grid: { left: 48, right: 16, top: 24, bottom: 32 },
    xAxis: { type: "category", data: ["North", "South", "East", "West"] },
    yAxis: { type: "value" },
    series: [{ type: "bar", data: [1200, 980, 1450, 1100] }],
  };

  return (
    <Chart
      option={option}
      variant="monochrome"
      width={480}
      height={300}
      accessibilityLabel="Bar chart. Sales by region."
    />
  );
}

export default App;
```

***

## Variant styling

`variant` applies the following treatment:

| Concern | Behavior |
| - | - |
| Color | Monochrome steps or categorical hues by datum index |
| Corner radius | Open end of each bar, following orientation and sign |
| Hover | Series focus and blur |

Avoid hand-authoring `borderRadius` or palette hex values to reproduce this treatment.

***

## Direct labels

Direct labels keep values visible without hover. Categorical bar charts require them, because the categorical hues do not all reach a 3:1 contrast ratio against each other.

The chart theme styles `bar.label` with a font, a translucent background, and 4px of padding, and leaves it at `show: false`. Enable it for the orientation in use:

* Vertical bars: `label: { show: true, position: "top" }` places the label above the open end
* Horizontal bars: `label: { show: true, position: "right" }` places the label past the open end

Leave `renderTooltip` unset when direct labels carry enough information. Widen `grid` on the open end so labels are not clipped.

charts-react-bar-direct-labels

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/charts-react-bar-direct-labels?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Chart, type EChartsOption } from "@servicetitan/anvil2-charts-kit";
import "@servicetitan/anvil2-charts-kit/styles.css";

function App() {
  const option: EChartsOption = {
    grid: { left: 96, right: 56, top: 24, bottom: 32 },
    xAxis: { type: "value" },
    yAxis: { type: "category", data: ["North", "South", "East", "West"] },
    series: [
      {
        type: "bar",
        data: [1200, 980, 1450, 1100],
        label: { show: true, position: "right" },
      },
    ],
  };

  return (
    <Chart
      option={option}
      variant="monochrome"
      width={560}
      height={300}
      accessibilityLabel="Bar chart. Sales by region."
    />
  );
}

export default App;
```

***

## Tooltips

Pass `renderTooltip` for richer hover content, either in place of direct labels or alongside them. See [Chart component](https://anvil.servicetitan.com/docs/charts/web/chart.md#tooltips).

charts-react-bar-tooltip

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/charts-react-bar-tooltip?file=src/App.tsx)

```tsx lines expandable theme={null}
import {
  Chart,
  type ChartTooltipInfo,
  type EChartsOption,
} from "@servicetitan/anvil2-charts-kit";
import "@servicetitan/anvil2-charts-kit/styles.css";
import { CartoTheme, Text, TooltipSurface } from "@servicetitan/anvil2-ai-kit";
// This file is most likely already in your workspace
import "@servicetitan/anvil2-ai-kit/styles.css";

function renderTooltip({ name, points }: ChartTooltipInfo) {
  return (
    <TooltipSurface
      content={
        <>
          <Text text={name} />
          {points.map((point) => (
            <Text
              key={point.seriesIndex}
              text={`${point.seriesName ? `${point.seriesName}: ` : ""}${String(point.value)}`}
            />
          ))}
        </>
      }
    />
  );
}

function App() {
  const option: EChartsOption = {
    grid: { left: 48, right: 16, top: 24, bottom: 32 },
    xAxis: { type: "category", data: ["North", "South", "East", "West"] },
    yAxis: { type: "value" },
    series: [{ type: "bar", data: [1200, 980, 1450, 1100] }],
  };

  return (
    <CartoTheme>
      <Chart
        option={option}
        variant="monochrome"
        renderTooltip={renderTooltip}
        width={480}
        height={300}
        accessibilityLabel="Bar chart. Sales by region."
      />
    </CartoTheme>
  );
}

export default App;
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.