---
title: "Background"
framework: react
version: "14.1.0"
---

# Background

This section describes how to change the background of a chart.

## Background Fill

To change the colour of the chart background, simply provide a colour string value for the `background.fill` property.

```js
{
    background: {
        fill: 'rgb(63, 127, 255)',
    },
}
```

#### Background Fill

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgPolarChartOptions,
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";
import { getData } from "./data";
import { random } from "./seededRandom";
import clone from "clone";

function randomChannel() {
  return Math.floor(random() * 256);
}
ModuleRegistry.registerModules([LegendModule, PieSeriesModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgPolarChartOptions>({
    data: getData(),
    series: [
      {
        type: "pie",
        angleKey: "value",
      },
    ],
    background: {
      fill: "aliceblue",
    },
  });

  const randomColor = () => {
    const nextOptions = clone(options);

    const color = `rgb(${randomChannel()}, ${randomChannel()}, ${randomChannel()})`;
    nextOptions.background = {
      fill: color,
    };

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={randomColor}>🍭 Random color</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Background Fill](https://www.ag-grid.com/charts/reactFunctionalTs/background/examples/background-fill)

To set the background of chart elements see [Fills & Borders](https://www.ag-grid.com/charts/react/fills-borders/).

## API Reference

#### Background

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| visible | boolean |  | Whether the background should be visible. |
| fill | CssColor |  | Colour of the chart background. |