> ## Documentation Index
> Fetch the complete documentation index at: https://docs.activeviam.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize charts

> How to customize Plotly chart appearance in Atoti UI beyond the Style tab by adding a plotly attribute in the State tab, using the layout, data, and config properties to override legend position, marker mode, and the displayModeBar configuration option.

[Charts](../about-widgets#charts) can be styled using the [Style tab](./edit-the-style-of-a-widget). However, they can be customized further in the **State** tab.

<Note>
  The **State** tab is an advanced
  [tool](../../../../developer-guide/customize-atoti-ui/customize-the-dashboard/manage-the-tool-panel/configure-the-tool-panel).
  If you cannot find it in your application, contact your system administrator.
</Note>

In the **State** tab you can add a `plotly` attribute and use the [layout](https://plotly.com/javascript/reference/layout/), data or [config](https://plotly.com/javascript/configuration-options/) properties to override the default configuration and modify certain aspects of [Plotly](https://plotly.com/javascript/reference/) charts. For example, to change the chart legend's position to horizontal, you can add the following code:

```
	"plotly": {
		"layout": {
			"legend": {
				"orientation": "h"
			}
		}
	}
```

You can use the `data` property to change a line chart to only display the markers:

```
	"plotly": {
		"data": {
			"commonTraceOverride": {
				"mode": "markers"
			}
		}
	}
```

You can use the `config` property to edit the Plotly [configuration options](https://plotly.com/javascript/configuration-options/). For example, you can have the display mode bar always be visible:

```
	"plotly": {
		"config": {
			"displayModeBar": true
		}
	}
```