---
title: "Fills & Borders"
framework: react
version: "14.1.0"
---

# Fills & Borders

This section describes how to change the fills and borders of chart elements.

#### Fills & Borders

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartLabelStylerParams,
  AgChartOptions,
  BubbleSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { femaleHeightWeight, maleHeightWeight } from "./data";

type DataType = {
  height: number;
  weight: number;
  age: number;
  name: string;
};

ModuleRegistry.registerModules([
  BubbleSeriesModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions<DataType>>({
    title: {
      text: "Weight vs Height",
      fill: "#f0f4f9",
      cornerRadius: 8,
      border: {
        enabled: true,
        stroke: "#999",
        strokeWidth: 1,
      },
    },
    subtitle: {
      text: "by gender",
      fill: "#f0f4f9",
      cornerRadius: 8,
    },
    seriesArea: {
      border: {
        stroke: "#999",
        strokeOpacity: 0.75,
        strokeWidth: 3,
      },
      cornerRadius: 8,
      padding: 0,
    },
    legend: {
      position: {
        placement: "top-right",
        floating: true,
        xOffset: -20,
        yOffset: 15,
      },
      fill: "#999",
      fillOpacity: 0.15,
      border: {
        enabled: true,
        stroke: "#999",
        strokeOpacity: 0.5,
      },
      padding: 10,
    },
    series: [
      {
        type: "bubble",
        title: "Male",
        data: maleHeightWeight,
        xKey: "height",
        xName: "Height",
        yKey: "weight",
        yName: "Weight",
        sizeKey: "age",
        sizeName: "Age",
        labelKey: "name",
        labelName: "Name",
        label: {
          cornerRadius: 4,
          fill: "#badaff",
          padding: { top: 4, right: 6, bottom: 4, left: 6 },
          border: {
            enabled: true,
            stroke: "#2c79d5",
            strokeWidth: 1,
          },
          color: "#333",
          itemStyler: (params: AgChartLabelStylerParams<DataType, unknown>) => {
            if (params.datum.name.startsWith("D")) {
              return {
                border: {
                  stroke: "#f00",
                  strokeWidth: 3,
                  strokeOpacity: 1,
                },
                padding: { top: 6, right: 8, bottom: 6, left: 8 },
                fontWeight: "bold",
                color: "#fff",
                fill: {
                  type: "gradient",
                  rotation: 90,
                  colorStops: [
                    { color: "#0052b1", stop: 0 },
                    { color: "#248aff" },
                  ],
                },
              };
            } else if (params.datum.name.startsWith("E")) {
              return {
                border: {
                  stroke: "#000",
                  strokeWidth: 3,
                  strokeOpacity: 1,
                },
                padding: { top: 6, right: 8, bottom: 6, left: 8 },
                fontWeight: "bold",
                color: "#000",
                fill: {
                  type: "gradient",
                  colorStops: [
                    { color: "#248aff", stop: 0 },
                    { color: "#badaff" },
                  ],
                },
              };
            }
          },
        },
      },
      {
        type: "bubble",
        title: "Female",
        data: femaleHeightWeight,
        xKey: "height",
        xName: "Height",
        yKey: "weight",
        yName: "Weight",
        sizeKey: "age",
        sizeName: "Age",
        labelKey: "name",
        labelName: "Name",
        label: {
          cornerRadius: 4,
          fill: "#fcc992",
          padding: { top: 4, right: 6, bottom: 4, left: 6 },
          border: {
            enabled: true,
            stroke: "#ea7e04",
            strokeWidth: 1,
          },
          color: "#333",
          itemStyler: (params: AgChartLabelStylerParams<DataType, unknown>) => {
            if (params.datum.name.startsWith("D")) {
              return {
                border: {
                  stroke: "#f00",
                  strokeWidth: 3,
                  strokeOpacity: 1,
                },
                padding: { top: 6, right: 8, bottom: 6, left: 8 },
                fontWeight: "bold",
                color: "#fff",
                fill: {
                  type: "gradient",
                  rotation: 90,
                  colorStops: [
                    { color: "#c56600", stop: 0 },
                    { color: "#fb9323" },
                  ],
                },
              };
            } else if (params.datum.name.startsWith("E")) {
              return {
                border: {
                  stroke: "#000",
                  strokeWidth: 3,
                  strokeOpacity: 1,
                },
                padding: { top: 6, right: 8, bottom: 6, left: 8 },
                fontWeight: "bold",
                color: "#000",
                fill: {
                  type: "gradient",
                  colorStops: [
                    { color: "#fb9323", stop: 0 },
                    { color: "#fcc992" },
                  ],
                },
              };
            }
          },
        },
      },
    ],
    axes: {
      x: {
        type: "number",
        title: {
          text: "Height",
        },
        label: {
          fill: "#999",
          fillOpacity: 0.2,
          cornerRadius: 16,
          padding: { top: 4, right: 8, bottom: 4, left: 8 },
          formatter: (params) => {
            return params.value + "cm";
          },
        },
      },
      y: {
        type: "number",
        title: {
          text: "Weight",
        },
        label: {
          fill: "#999",
          fillOpacity: 0.2,
          cornerRadius: 16,
          padding: { top: 4, right: 8, bottom: 4, left: 8 },
          formatter: (params) => {
            return params.value + "kg";
          },
        },
      },
    },
  });

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

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

[Live example: Fills & Borders](https://www.ag-grid.com/charts/reactFunctionalTs/fills-borders/examples/fills-borders)

In the above example:

- A border is drawn around the series area with a corner radius and no padding.
- A fill and corner radius are applied to the chart title and subtitle, with a border applied to the title only.
- A border, fill and corner radius are applied to the [Legend](https://www.ag-grid.com/charts/react/legend/), with padding between the border and items provided as a single number.
- A border, fill and corner radius are applied to the series labels and [axis labels](https://www.ag-grid.com/charts/react/axes-labels/) with padding defined for each of the top, right, bottom and left.
- An [item styler](https://www.ag-grid.com/charts/react/stylers/#item-stylers) is used to override the styling of series labels for names starting with the letter 'D' and 'E'.

## Fills

```js
{
    label: {
        color: '#333', //font colour
        fill: '#badaff', // fill colour
        fillOpacity: 0.8,
    },
}
```

See [Series Fills](https://www.ag-grid.com/charts/react/fills/) for details of the available fills types, including [patterns](https://www.ag-grid.com/charts/react/fills/#patterns) and [gradients](https://www.ag-grid.com/charts/react/fills/#gradients).

## Borders

```js
{
    border: {
        enabled: true,
        stroke: '#2c79d5',
        strokeWidth: 1,
    },
}
```

## Padding

Padding can be defined as a single number to be applied to all sides of the element, or as an object with values for `top`, `right`, `bottom` and `left`.

```js
{
    padding: 4, //padding of 4px on all sides
}
```

```js
{
    padding: {
        top: 4,
        right: 6,
        bottom: 2,
        left: 6,
    },
}
```

### Item Styler

Individual axis and series labels can be customised using a [Styler](https://www.ag-grid.com/charts/react/stylers/#item-stylers) callback.

```js
itemStyler: (params) => {
    if (params.datum.name.startsWith('D')) {
        return {
            /* ... */
            fill: {
                type: 'gradient',
                rotation: 90,
                colorStops: [{ color: '#c56600', stop: 0 }, { color: '#fb9323' }],
            },
        };
    }
}
```

## API Reference

#### Series Area

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| border | BorderOptions |  | The border around the series area. |
| border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| cornerRadius | number |  | The corner radius of the series area. |
| padding | PixelSize \| PaddingOptions |  | Configuration for the padding inside the series area. A number applies uniform padding; an object sets each side. |

#### Label Box

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| border | BorderOptions |  | Stroke options for the box border. |
| border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| 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. |

#### Caption

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| border | BorderOptions |  | Stroke options for the box border. |
| border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| 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. |

#### Legend

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| border | BorderOptions |  | The border around the legend. |
| border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| cornerRadius | PixelSize |  | The corner radius of the legend. |
| padding | PixelSize \| PaddingOptions |  | The padding between the border and legend items. A number applies uniform padding; an object sets each side. |
| 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. |

#### Gradient Legend

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| border | BorderOptions |  | The border around the legend. |
| border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| cornerRadius | PixelSize |  | The corner radius of the legend. |
| padding | PixelSize \| PaddingOptions |  | The padding between the border and legend items. A number applies uniform padding; an object sets each side. |
| 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. |