---
title: "Bar Series"
framework: react
version: "14.1.0"
---

# Bar Series

A Bar Series visualises numerical data with proportional bars that can be grouped, stacked or overlaid, and displayed in either vertical or horizontal layouts.

## Simple Bar

By default, bars are grouped, enabling side-by-side comparison of data against the same category.

#### Simple Bar

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Apple's Revenue by Product Category",
    },
    subtitle: {
      text: "In Billion U.S. Dollars",
    },
    data: getData(),
    series: [
      {
        type: "bar",
        xKey: "quarter",
        yKey: "iphone",
        yName: "iPhone",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "mac",
        yName: "Mac",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "ipad",
        yName: "iPad",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "wearables",
        yName: "Wearables",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "services",
        yName: "Services",
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Simple Bar](https://www.ag-grid.com/charts/reactFunctionalTs/bar-series/examples/simple-bar)

To create a Bar Series, use the `bar` series type.

```js
{
    series: [
        { type: 'bar', xKey: 'quarter', yKey: 'iphone', yName: 'iPhone' },
        { type: 'bar', xKey: 'quarter', yKey: 'mac', yName: 'Mac' },
        { type: 'bar', xKey: 'quarter', yKey: 'ipad', yName: 'iPad' },
        { type: 'bar', xKey: 'quarter', yKey: 'wearables', yName: 'Wearables' },
        { type: 'bar', xKey: 'quarter', yKey: 'services', yName: 'Services' },
    ],
}
```

In this configuration:

- `xKey` defines the categories, and is mapped to the [Category Axis](https://www.ag-grid.com/charts/react/axes-types/#category).
- `yKey` provides the numerical values, corresponding to the [Number Axis](https://www.ag-grid.com/charts/react/axes-types/#number).
- `yName` configures display names, reflected in [Tooltip Titles](https://www.ag-grid.com/charts/react/tooltips/) and [Legend Items](https://www.ag-grid.com/charts/react/legend/).

## Horizontal Bar

#### Horizontal Bars

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Apple's Revenue by Product Category",
    },
    subtitle: {
      text: "In Billion U.S. Dollars",
    },
    data: getData(),
    series: [
      {
        type: "bar",
        direction: "horizontal",
        xKey: "quarter",
        yKey: "iphone",
        yName: "iPhone",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "quarter",
        yKey: "mac",
        yName: "Mac",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "quarter",
        yKey: "ipad",
        yName: "iPad",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "quarter",
        yKey: "wearables",
        yName: "Wearables",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "quarter",
        yKey: "services",
        yName: "Services",
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Horizontal Bars](https://www.ag-grid.com/charts/reactFunctionalTs/bar-series/examples/horizontal-bar)

To show a Horizontal Bar Series, set `direction: 'horizontal'`.

```js
{
    series: [
        { type: 'bar', direction: 'horizontal', xKey: 'quarter', yKey: 'iphone', yName: 'iPhone' },
        // ...
    ],
}
```

When the `direction` is `'horizontal'` the `xKey` values will be plotted on the default `y` axis, while the `yKey` values will be plotted on the default `x` axis.

## Stacked Bar

Stacked bars are useful for visualising data in a cumulative manner across different categories.

#### Stacked Bars

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Apple's Revenue by Product Category",
    },
    subtitle: {
      text: "In Billion U.S. Dollars",
    },
    data: getData(),
    series: [
      {
        type: "bar",
        xKey: "quarter",
        yKey: "iphone",
        yName: "iPhone",
        stacked: true,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "mac",
        yName: "Mac",
        stacked: true,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "ipad",
        yName: "iPad",
        stacked: true,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "wearables",
        yName: "Wearables",
        stacked: true,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "services",
        yName: "Services",
        stacked: true,
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Stacked Bars](https://www.ag-grid.com/charts/reactFunctionalTs/bar-series/examples/stacked-bars)

To stack bars enable the `stacked` series option.

```js
{
    series: [
        { type: 'bar', xKey: 'quarter', yKey: 'iphone', stacked: true },
        // ...
    ],
}
```

## Normalised Bar

#### Normalised Bar Series

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Apple's Revenue by Product Category",
    },
    subtitle: {
      text: "In Billion U.S. Dollars",
    },
    data: getData(),
    series: [
      {
        type: "bar",
        xKey: "quarter",
        yKey: "iphone",
        yName: "iPhone",
        normalizedTo: 100,
        stacked: true,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "mac",
        yName: "Mac",
        normalizedTo: 100,
        stacked: true,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "ipad",
        yName: "iPad",
        normalizedTo: 100,
        stacked: true,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "wearables",
        yName: "Wearables",
        normalizedTo: 100,
        stacked: true,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "services",
        yName: "Services",
        normalizedTo: 100,
        stacked: true,
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Normalised Bar Series](https://www.ag-grid.com/charts/reactFunctionalTs/bar-series/examples/normalised-bar)

The `normalizedTo` series option allows normalising bar totals to any non-zero value.

```js
{
    series: [
        { type: 'bar', xKey: 'quarter', yKey: 'iphone', stacked: true, normalizedTo: 100 },
        // ...
    ],
}
```

## Grouped Stacks

#### Grouped Stack Series

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Apple's Revenue by Product Category",
    },
    subtitle: {
      text: "In Billion U.S. Dollars",
    },
    data: getData(),
    series: [
      {
        type: "bar",
        xKey: "quarter",
        yKey: "iphone",
        yName: "iPhone",
        stackGroup: "Devices",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "mac",
        yName: "Mac",
        stackGroup: "Devices",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "ipad",
        yName: "iPad",
        stackGroup: "Devices",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "wearables",
        yName: "Wearables",
        stackGroup: "Other",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "services",
        yName: "Services",
        stackGroup: "Other",
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Grouped Stack Series](https://www.ag-grid.com/charts/reactFunctionalTs/bar-series/examples/grouped-stack)

The `stackGroup` property allows for stacking bars in distinct sets by specifying which series are grouped together. Series with an unspecified `stackGroup` will be stacked together by default.

```js
{
    series: [
        { type: 'bar', xKey: 'quarter', yKey: 'iphone', stackGroup: 'Devices' },
        { type: 'bar', xKey: 'quarter', yKey: 'mac', stackGroup: 'Devices' },
        { type: 'bar', xKey: 'quarter', yKey: 'ipad', stackGroup: 'Devices' },
        { type: 'bar', xKey: 'quarter', yKey: 'wearables', stackGroup: 'Other' },
        { type: 'bar', xKey: 'quarter', yKey: 'services', stackGroup: 'Other' },
    ],
}
```

A matching `legendItemName` provided enables the creation of multiple bar series with synchronised legend items. When a legend item is clicked, all items possessing a matching `legendItemName` will be toggled collectively.

#### Grouped Stacks with a Shared Legend

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Apple's Revenue by Region",
    },
    subtitle: {
      text: "In Billion U.S. Dollars",
    },
    data: getData(),
    series: [
      {
        type: "bar",
        xKey: "year",
        yKey: "NAQ1",
        yName: "Q1 - North America",
        legendItemName: "Q1",
        stackGroup: "na",
        fill: "#5090dc",
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "NAQ2",
        yName: "Q2 - North America",
        legendItemName: "Q2",
        stackGroup: "na",
        fill: "#ffa03a",
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "NAQ3",
        yName: "Q3 - North America",
        legendItemName: "Q3",
        stackGroup: "na",
        fill: "#459d55",
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "NAQ4",
        yName: "Q4 - North America",
        legendItemName: "Q4",
        stackGroup: "na",
        fill: "#34bfe1",
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "EURQ1",
        yName: "Q1 - Europe",
        legendItemName: "Q1",
        stackGroup: "eur",
        showInLegend: false,
        fill: "#5090dc",
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "EURQ2",
        yName: "Q2 - Europe",
        legendItemName: "Q2",
        stackGroup: "eur",
        showInLegend: false,
        fill: "#ffa03a",
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "EURQ3",
        yName: "Q3 - Europe",
        legendItemName: "Q3",
        stackGroup: "eur",
        showInLegend: false,
        fill: "#459d55",
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "EURQ4",
        yName: "Q4 - Europe",
        legendItemName: "Q4",
        stackGroup: "eur",
        showInLegend: false,
        fill: "#34bfe1",
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "ASIAQ1",
        yName: "Q1 - Asia",
        legendItemName: "Q1",
        stackGroup: "asia",
        showInLegend: false,
        fill: "#5090dc",
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "ASIAQ2",
        yName: "Q2 - Asia",
        legendItemName: "Q2",
        stackGroup: "asia",
        showInLegend: false,
        fill: "#ffa03a",
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "ASIAQ3",
        yName: "Q3 - Asia",
        legendItemName: "Q3",
        stackGroup: "asia",
        showInLegend: false,
        fill: "#459d55",
      },
      {
        type: "bar",
        xKey: "year",
        yKey: "ASIAQ4",
        yName: "Q4 - Asia",
        legendItemName: "Q4",
        stackGroup: "asia",
        showInLegend: false,
        fill: "#34bfe1",
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Grouped Stacks with a Shared Legend](https://www.ag-grid.com/charts/reactFunctionalTs/bar-series/examples/grouped-stack-shared-legend)

## Grouped Category

To display the bars in hierarchical grouped categories, use a [Grouped Category Axis](https://www.ag-grid.com/charts/react/axes-types/#grouped-category).

#### Grouped Category Axis

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  BarSeriesModule,
  GroupedCategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  GroupedCategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Apple's Revenue by Product Category",
    },
    subtitle: {
      text: "In Billion U.S. Dollars",
    },
    data: getData(),
    series: [
      {
        type: "bar",
        xKey: "quarter",
        yKey: "iphone",
        yName: "iPhone",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "mac",
        yName: "Mac",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "ipad",
        yName: "iPad",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "wearables",
        yName: "Wearables",
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "services",
        yName: "Services",
      },
    ],
    axes: {
      x: {
        type: "grouped-category",
        label: { rotation: 0 },
        depthOptions: [{}, { label: { fontWeight: "bold" } }],
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Grouped Category Axis](https://www.ag-grid.com/charts/reactFunctionalTs/bar-series/examples/grouped-category-bar)

## Fixed Width Bars

The width of each Bar series can be set to a fixed pixel value or a proportion of the default width.

#### Fixed Width

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: getData(),
    title: {
      text: "Apple's Revenue by Product Category",
    },
    series: [
      {
        type: "bar",
        xKey: "quarter",
        yKey: "iphone",
        yName: "iPhone",
        stacked: true,
        width: 50,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "mac",
        yName: "Mac",
        stacked: true,
        width: 50,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "ipad",
        yName: "iPad",
        stacked: true,
        width: 50,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "wearables",
        yName: "Wearables",
        stacked: true,
        width: 50,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "services",
        yName: "Services",
        stacked: true,
        width: 50,
      },
    ],
    axes: {
      x: {
        type: "category",
        bandAlignment: "start",
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Fixed Width](https://www.ag-grid.com/charts/reactFunctionalTs/bar-series/examples/fixed-width)

See [Series Bars](https://www.ag-grid.com/charts/react/bars/) for details on customising bar widths and band alignment.

## Actual vs Target Bars

Multiple Bar series can be overlaid to visualise actual vs target values.

#### Actual vs Target Bars

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: getData(),
    title: {
      text: "Quarterly Sales vs Targets",
    },
    series: [
      {
        type: "bar",
        direction: "horizontal",
        xKey: "quarter",
        yKey: "quota",
        yName: "Quota",
        stacked: true,
        fillOpacity: 0.3,
        grouped: false,
        highlight: {
          enabled: false,
        },
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "quarter",
        yKey: "stretch",
        yName: "Stretch Target",
        stacked: true,
        fillOpacity: 0.3,
        grouped: false,
        highlight: {
          enabled: false,
        },
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "quarter",
        yKey: "actual",
        yName: "Actual",
        grouped: false,
        widthRatio: 0.7,
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Actual vs Target Bars](https://www.ag-grid.com/charts/reactFunctionalTs/bar-series/examples/actual-target)

See [Actual vs Target Bars](https://www.ag-grid.com/charts/react/bars/#actual-vs-target-bars) for more details.

## Customisation

### Corner Radius

#### Customising Corner Radius

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Apple's Revenue by Product Category",
    },
    subtitle: {
      text: "In Billion U.S. Dollars",
    },
    data: getData(),
    series: [
      {
        type: "bar",
        xKey: "quarter",
        yKey: "iphone",
        yName: "iPhone",
        stacked: true,
        cornerRadius: 10,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "mac",
        yName: "Mac",
        stacked: true,
        cornerRadius: 10,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "ipad",
        yName: "iPad",
        stacked: true,
        cornerRadius: 10,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "wearables",
        yName: "Wearables",
        stacked: true,
        cornerRadius: 10,
      },
      {
        type: "bar",
        xKey: "quarter",
        yKey: "services",
        yName: "Services",
        stacked: true,
        cornerRadius: 10,
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Customising Corner Radius](https://www.ag-grid.com/charts/reactFunctionalTs/bar-series/examples/customising-corner-radius)

The corner radius can be customised with the `cornerRadius` property.

```js
{
    series: [
        { type: 'bar', xKey: 'quarter', yKey: 'iphone', stacked: true, cornerRadius: 10 },
        { type: 'bar', xKey: 'quarter', yKey: 'mac', stacked: true, cornerRadius: 10 },
        // ...
    ],
}
```

> **Note**
>
> A `cornerRadius` should be provided for all series within a stacked bar. The corner radius will only be applied at the end of a stack, but may affect more than one series.

## Labels

See [Series Labels](https://www.ag-grid.com/charts/react/series-labels/) for how to enable and style Bar Series labels, including [Placement](https://www.ag-grid.com/charts/react/series-labels/#placement) and [Orientation](https://www.ag-grid.com/charts/react/series-labels/#orientation), which have bar-specific values.

## API Reference

#### Bar Series

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'bar' |  | Configuration for the Bar Series. |
| xKey (required) | DatumKey |  | The key to use to retrieve x-values from the data. |
| yKey (required) | DatumKey |  | The key to use to retrieve y-values from the data. |
| grouped | boolean |  | Whether to group together (adjacently) separate bars. |
| stacked | boolean |  | An option indicating if the bars should be stacked. |
| stackGroup | string |  | An ID to be used to group stacked items. |
| normalizedTo | number |  | The number to normalise the bar stacks to. Has no effect when `grouped` is `true`. For example, if `normalizedTo` is set to `100`, the bar stacks will all be scaled proportionally so that each of their totals is 100. |
| errorBar | AgErrorBarOptions |  | Configuration for the Error Bars. |
| errorBar.xLowerKey | DatumKey |  | The key to use to retrieve lower bound error values from the x-axis data. |
| errorBar.xUpperKey | DatumKey |  | The key to use to retrieve upper bound error values from the x-axis data. |
| errorBar.yLowerKey | DatumKey |  | The key to use to retrieve lower bound error values from the y-axis data. |
| errorBar.yUpperKey | DatumKey |  | The key to use to retrieve upper bound error values from the y-axis data. |
| errorBar.xLowerName | string |  | Human-readable description of the lower bound error value for the x-axis. This is the value to use in tooltips or labels. |
| errorBar.xUpperName | string |  | Human-readable description of the upper bound error value for the x-axis. This is the value to use in tooltips or labels. |
| errorBar.yLowerName | string |  | Human-readable description of the lower bound error value for the y-axis. This is the value to use in tooltips or labels. |
| errorBar.yUpperName | string |  | Human-readable description of the upper bound error value for the y-axis. This is the value to use in tooltips or labels. |
| errorBar.itemStyler | Styler |  | Function used to return formatting for individual error bars, based on the given parameters. |
| errorBar.cap | ErrorBarCapOptions |  | Options to style error bars' caps |
| errorBar.cap.length | PixelSize |  | Absolute length of caps in pixels. |
| errorBar.cap.lengthRatio | Ratio |  | Length of caps relative to the shape used by the series. |
| errorBar.cap.visible | boolean |  | Whether to display the error bars. |
| errorBar.cap.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| errorBar.cap.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| errorBar.cap.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| errorBar.cap.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| errorBar.cap.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| errorBar.visible | boolean |  | Whether to display the error bars. |
| errorBar.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| errorBar.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| errorBar.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| errorBar.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| errorBar.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| id | string | auto-generated value | Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value. |
| context | ContextDefault |  | Context object to use in callbacks. |
| data | DatumDefault[] |  | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. |
| visible | boolean |  | Whether to display the series. |
| cursor | string |  | The cursor to use for hovered markers. This config is identical to the CSS `cursor` property. |
| selection | AgSelectionOptions |  | Configuration for data selection. |
| selection.enabled | boolean |  | Set to `true` to enable the data-selection on this series. |
| selection.containment | 'any' \| 'all' | chart.selection.containment | Override the drag-to-select containment rule for this series. |
| selection.selectedItem | AgSelectionStyleOptions |  | Styling options for selected items. |
| selection.selectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.selectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.selectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.selectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.selectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.selectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.selectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| selection.selectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedItem | AgSelectionStyleOptions |  | Styling options for unselected items. |
| selection.unselectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| selection.unselectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedSeries | AgSelectionStyleOptions |  | Styling options for series with no selections when there is at least one other selected series. |
| selection.unselectedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| selection.unselectedSeries.fillOpacity | Opacity |  | The opacity of the fill colour. |
| nodeClickRange | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a node that a click triggers the listener. |
| showInLegend | boolean |  | Whether to include the series in the legend. |
| listeners | AgSeriesListeners |  | A map of event names to event listeners. |
| listeners.seriesNodeClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. |
| listeners.seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double-clicked. |
| xKeyAxis | string | 'x' | The key of the x-axis to which this series is bound. |
| yKeyAxis | string | 'y' | The key of the y-axis to which this series is bound. |
| xName | string |  | A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| yName | string |  | Human-readable description of the y-values. If supplied, a corresponding `yName` will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| legendItemName | string |  | Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together. |
| direction | 'horizontal' \| 'vertical' |  | Bar rendering direction.  __Note:__ This option affects the layout direction of X and Y data values. |
| crisp | boolean |  | Align bars to whole pixel values to remove anti-aliasing. |
| shadow | AgDropShadowOptions |  | Configuration for the shadow used behind the chart series. |
| shadow.enabled | boolean |  | Whether the shadow is visible. |
| shadow.color | CssColor |  | The colour of the shadow. |
| shadow.xOffset | PixelSize |  | The horizontal offset in pixels for the shadow. |
| shadow.yOffset | PixelSize |  | The vertical offset in pixels for the shadow. |
| shadow.blur | PixelSize |  | The radius of the shadow's blur, given in pixels. |
| label | AgBarSeriesLabelOptions |  | Configuration for the labels shown on bars. |
| label.placement | AgBarSeriesLabelPlacement \| AgBarSeriesLabelPlacement[] |  | Where to render series labels relative to the segments. Either a single placement or an ordered fallback list tried in turn until one fits. |
| label.spacing | PixelSize |  | Distance between the shape edges and the text. |
| label.orientation | AgChartLabelOrientation \| AgChartLabelOrientation[] | horizontal | Orientation of the label within the bar. `horizontal` reads upright; the two `vertical` variants rotate it a quarter-turn in opposite directions. Either a single orientation or an ordered fallback list tried in turn until one fits. |
| label.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| label.format | string |  | Format string used when rendering labels. |
| label.itemStyler | Styler |  | Function used to style individual datum labels. |
| label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| label.fontFamily | FontFamily |  | The font family for text elements. |
| label.fontStyle | FontStyle |  | The style to use for text elements. |
| label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| label.border | BorderOptions |  | Stroke options for the box border. |
| label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| label.collision | AgChartLabelCollisionOptions |  | Configuration controlling the spacing kept from obstacles and whether a label that cannot be placed clear of every obstacle is kept at its least-overflowing placement or hidden. |
| label.collision.threshold | PixelSize |  | Collision threshold in pixels. A positive value triggers avoidance strategies when labels are further away, a negative value allows labels to overlap without triggering avoidance. |
| label.collision.alwaysShow | boolean |  | Whether to keep a colliding label visible when a collision remains after every avoidance strategy has been applied. When `true` the label stays at the best available position; when `false` it is hidden instead. |
| label.maxWidth | PixelSize |  | Maximum width, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| label.maxHeight | PixelSize |  | Maximum height, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' |  | Text wrapping strategy applied when the label is constrained by `maxWidth` or `maxHeight`. - `'always'` will always wrap text to fit within the bounds. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the bounds, the text will be truncated. - `'never'` disables text wrapping. |
| label.truncate | boolean |  | Whether to truncate the label with an ellipsis when it does not fit within its bounds. |
| label.insideStyle | AgChartLabelPlacementStyleOptions |  | Style overrides applied only when the label's resolved placement is inside the shape. |
| label.insideStyle.cornerRadius | PixelSize |  | Rounded corners applied to the label box for this placement. |
| label.insideStyle.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the box edge for this placement. |
| label.insideStyle.border | StrokeOptions |  | Border stroke applied to the label box for this placement. |
| label.insideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| label.insideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| label.insideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| label.insideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| label.insideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| label.insideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| label.outsideStyle | AgChartLabelPlacementStyleOptions |  | Style overrides applied only when the label's resolved placement is outside the shape. |
| label.outsideStyle.cornerRadius | PixelSize |  | Rounded corners applied to the label box for this placement. |
| label.outsideStyle.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the box edge for this placement. |
| label.outsideStyle.border | StrokeOptions |  | Border stroke applied to the label box for this placement. |
| label.outsideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| label.outsideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| label.outsideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| label.outsideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| label.outsideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| label.outsideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| tooltip | AgSeriesTooltip |  | Series-specific tooltip configuration. |
| tooltip.enabled | boolean |  | Whether to show tooltips when the series are hovered over. |
| tooltip.showArrow | boolean |  | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. |
| tooltip.range | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a point that triggers the tooltip to show. Each series type uses its own default; typically this is `'nearest'` for marker-based series and `'exact'` for shape-based series. |
| tooltip.position | AgTooltipPositionOptions |  | The position of the tooltip. Each series type uses its own default; typically this is `'node'` for marker-based series and `'pointer'` for shape-based series. |
| tooltip.position.anchorTo | AgTooltipAnchorTo |  | The element or point to position the tooltip relative to. |
| tooltip.position.placement | AgTooltipPlacement \| AgTooltipPlacement[] |  | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. |
| tooltip.position.xOffset | PixelSize |  | The horizontal offset in pixels for the position of the tooltip. |
| tooltip.position.yOffset | PixelSize |  | The vertical offset in pixels for the position of the tooltip. |
| tooltip.position.offset | PixelSize |  | The distance in pixels between the tooltip and its anchor point, applied in the placement direction.  Default: `12` (`0` when `anchorTo` is `'chart'`). |
| tooltip.interaction | AgSeriesTooltipInteraction |  | Configuration for tooltip interaction. |
| tooltip.interaction.enabled (required) | boolean |  | Set to `true` to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text |
| tooltip.renderer | Renderer |  | Function used to create the content for tooltips. |
| styler | Styler |  | Function used to return formatting for entire series, based on the given parameters. |
| itemStyler | Styler |  | Function used to return formatting for individual bars, based on the given parameters. |
| highlight | AgMultiSeriesHighlightOptions |  | Configuration for highlighting when a series or legend item is hovered over. |
| highlight.highlightedSeries | AgBarHighlightStyleOptions |  | Options for the highlighted series. |
| highlight.highlightedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.highlightedSeries.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| highlight.highlightedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.highlightedSeries.fillOpacity | Opacity |  | The opacity of the fill colour. |
| highlight.highlightedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.highlightedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.highlightedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.highlightedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.highlightedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.unhighlightedSeries | AgBarHighlightStyleOptions |  | Options for the un-highlighted series when there is an active highlight. |
| highlight.unhighlightedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.unhighlightedSeries.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| highlight.unhighlightedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.unhighlightedSeries.fillOpacity | Opacity |  | The opacity of the fill colour. |
| highlight.unhighlightedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.unhighlightedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.unhighlightedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.unhighlightedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.unhighlightedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.bringToFront | boolean | true | Show this series in front when highlighted. |
| highlight.enabled | boolean |  | Set to `false` to disable highlighting. |
| highlight.highlightedItem | AgBarHighlightStyleOptions |  | Options for the highlighted item. |
| highlight.highlightedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.highlightedItem.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| highlight.highlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.highlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| highlight.highlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.highlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.highlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.highlightedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.highlightedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.unhighlightedItem | AgBarHighlightStyleOptions |  | Options for the un-highlighted items when there is an active highlight. |
| highlight.unhighlightedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.unhighlightedItem.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| highlight.unhighlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.unhighlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| highlight.unhighlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.unhighlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.unhighlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.unhighlightedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.unhighlightedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| segmentation | AgSeriesSegmentation |  | Configuration for styling series as separate segments. |
| segmentation.key (required) | 'x' \| 'y' |  | The axis key used for segmentation. |
| segmentation.segments (required) | AgSeriesShapeSegmentOptions[] |  | Configuration for each segment. |
| segmentation.segments.start | AxisValue |  | The axis value at which the styles should start. This is the start of the axis domain by default. |
| segmentation.segments.stop | AxisValue |  | The axis value at which the styles should stop. This is the end of the axis domain by default. |
| segmentation.segments.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| segmentation.segments.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| segmentation.segments.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| segmentation.segments.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| segmentation.segments.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| segmentation.segments.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| segmentation.segments.fillOpacity | Opacity |  | The opacity of the fill colour. |
| segmentation.enabled | boolean |  | Whether segmentation is enabled. |
| width | PixelSize |  | Fixed width of each bar in the series. |
| widthRatio | Ratio |  | Ratio of the bandwidth (or specified width) to use for the width for each bar in the series. |
| cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| fillOpacity | Opacity |  | The opacity of the fill colour. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| showInMiniChart | boolean |  | Whether to include the series in the Mini Chart. |