> ## 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.

# Monochrome palette

> Compose out-of-order monochrome steps for @servicetitan/anvil2-charts-kit.

Themes assign monochrome color by series or datum index. Compose with `chartPalette` to reach a step outside that order.

* Design: [Look & feel](https://anvil.servicetitan.com/docs/data-visualization/look-and-feel.md)
* Shared API: [Chart component](https://anvil.servicetitan.com/docs/charts/web/chart.md)

Select a step and apply it through `chartStepItemStyle`:

charts-react-palette-monochrome

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

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

function App() {
  const appearance = "light" as const;
  const steps = chartPalette(appearance, "monochrome");

  const option: EChartsOption = {
    grid: { left: 48, right: 16, top: 24, bottom: 84 },
    legend: { bottom: 0 },
    xAxis: { type: "category", data: ["A", "B", "C", "D"] },
    yAxis: { type: "value" },
    series: [
      {
        type: "bar",
        name: "Highlight",
        data: [1200, 0, 0, 0],
        itemStyle: chartStepItemStyle(steps[3]!),
      },
      {
        type: "bar",
        name: "Rest",
        data: [0, 980, 1450, 1100],
      },
    ],
  };

  return (
    <Chart
      option={option}
      appearance={appearance}
      variant="categorical"
      width={480}
      height={300}
      accessibilityLabel="Bar chart. Highlighted category among the rest."
    />
  );
}

export default App;
```


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