# Background

{% hint style="success" %}
*Check out the given walk-through on how to apply the Background properties on the Designer charts.* 
{% endhint %}

<figure><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FraMexACUe4cAtJgey1bg%2FBackground%20property%20for%20charts.gif?alt=media&#x26;token=1ebec9af-b6f9-4cc5-b4ab-647e70f2b7f4" alt=""><figcaption></figcaption></figure>

You can insert various background properties and change the display of the chart or various charts in a dashboard.

Once you have associated a data connection with a charting component, you can select the Properties icon to open the chart related properties. To know how to create a Data Connection refer the [*<mark style="color:blue;">**Establishing a Data Connection**</mark>*](https://docs.bdb.ai/bdb-documentation/data-visualization/governed-dashboards/connecting-to-a-data-source/establishing-a-data-connection) section.

The following image displays the default ***Background*** Properties that open for the Column chart:

<figure><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2Fu1gcPVjGDbSN1jUhFKuL%2Fimage.png?alt=media&#x26;token=91c72903-332c-45f6-896d-cb99e42ee432" alt=""><figcaption></figcaption></figure>

The default data preview for the column chart:

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FI2Pnwp3FjZqrtv3NsXRc%2Fimage.png?alt=media\&token=721db12c-f124-435f-82a3-b057ae5fd996)

If we modify the ***Background*** properties in the following way:

<figure><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FWqs0SKXTPkIuCX1qXFK4%2Fimage.png?alt=media&#x26;token=202ddd47-866f-446d-82ba-4971e8830f4b" alt=""><figcaption></figcaption></figure>

The data preview with the column chart with the applied background properties appears as shown below:

<figure><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FkwZMtZxb5Qr53mDGmXYf%2Fimage.png?alt=media&#x26;token=4ef37367-8ce3-47bb-b528-b63928d7f8f6" alt=""><figcaption></figcaption></figure>

Click the ***Maximise*** icon <img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FOCjP3abSiHIJ1u3tt97m%2Fimage.png?alt=media&#x26;token=e100f627-1fe4-493f-87ad-36d27fdc586d" alt="" data-size="line"> to display the data preview in the full screen.

<figure><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FOONeUDY0NPF9mwgMLk6O%2Fimage.png?alt=media&#x26;token=0744b99d-44d8-40e2-840c-023bb9429289" alt=""><figcaption></figcaption></figure>

The user can add multiple Gradient colors by clicking the Gradient icon <img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FXNTZNLPrFFCpjsCfbddz%2Fimage.png?alt=media&#x26;token=1f332485-e552-4373-8a40-66d83d215f1f" alt="" data-size="line">from the ***Background*** properties panel.

* Click the ***Gradient*** icon.

&#x20;     ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2F4XEcTKxct01INfMFQWtW%2Fimage.png?alt=media\&token=d41753c1-424b-4892-a9f0-3cb1b462b2e1)

* The ***Background*** gradient colors window opens.
* Click the ***Add Color*** option.
* A new color gets added for the gradient.
* You may change the added color by using the available color pallet.
* Click the ***Save*** option to save the added colors for the background gradient.