---
title: "Background"
framework: vue
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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  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 = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="randomColor()">🍭 Random color</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgPolarChartOptions>({
      data: getData(),
      series: [
        {
          type: "pie",
          angleKey: "value",
        },
      ],
      background: {
        fill: "aliceblue",
      },
    });

    const randomColor = () => {
      const optionsCopy = clone(options.value);

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

      options.value = optionsCopy;
    };

    return {
      options,
      randomColor,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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

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

## API Reference

#### Background

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