---
title: "Background"
framework: javascript
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

```ts
import {
  AgCharts,
  AgPolarChartOptions,
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";
import { getData } from "./data";
import { random } from "./seededRandom";

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

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

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

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

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).randomColor = randomColor;
}
```

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

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

## API Reference

#### Background

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