# Deep customization chart (CSS)

## Introduction

With the custom CSS feature, Toucan provides you with the tools to go beyond standard customization options. Whether you want to align the application's look with your brand identity or make specific layout adjustments, custom CSS offers complete flexibility. By applying your own CSS styles, you can fine-tune Toucan's elements to meet your needs for branding, accessibility, and design.

This documentation includes practical examples demonstrating how custom CSS can enhance the appearance of your Toucan application, divided into three main areas: a homepage, a chart and a dashboard.

Discover the power of customization with Toucan’s custom CSS feature !

Here’s a sneak peek at how easily you can enhance the look of your application:

<figure><img src="https://lh7-qw.googleusercontent.com/docsz/AD_4nXdw70FlmMIHl4YdSXzBnRS9003XvEG9Ehm5rAea3BhGyPlLVjRY4W853w-Sm7Wx8pOQ1JMb-xqrhOaj3Eii9H-s--XAXEBI1LeC8BuMbzAKXmGTU5qSI1fR97QidrqNec1cVq_Oew?key=JSNMgaamRsns2DBiowR75RYx" alt=""><figcaption></figcaption></figure>

With just a few CSS adjustments, you can transform standard elements into visually engaging, brand-aligned components. Take a look at the before-and-after examples below to see what’s possible!

## Examples of custom CSS

{% hint style="warning" %}
If you notice some CSS styles that aren’t usually part of your app, try refreshing the page. This will load your custom CSS as expected, ensuring that all your personalized styles are displayed correctly.
{% endhint %}

### Homepage

In this example, the homepage reflects a theme for eco-friendly or sustainable branding.

<figure><img src="https://lh7-qw.googleusercontent.com/docsz/AD_4nXd4q0Q50aoHZKdh92bedV1rWXFVGmZ2t-Dm1FBl08XuuzyalvrBBtWqTgj93CDnLlQqFRJbew-WjxZ2L1MfTtb_KzF3Wobpx08SQIKMdgIQPfwdiYvSjkuglB6ruBv-NkgdTt259Z0wK-j_KyQvx0qeXiU?key=JSNMgaamRsns2DBiowR75RYx" alt=""><figcaption></figcaption></figure>

To access the CSS code for this customized homepage:

{% content-ref url="deep-customization-chart-css/homepage-customization" %}
[homepage-customization](https://docs-v3.toucantoco.com/tutorials/advanced-tutorials/deep-customization-chart-css/homepage-customization)
{% endcontent-ref %}

### Chart

The following example demonstrates how to create a sleek and minimalist style for charts, emphasizing clarity and elegance. You can use default colors available in the customization theme section, change colors, and hide certain elements for a streamlined look.

<figure><img src="https://lh7-qw.googleusercontent.com/docsz/AD_4nXc_YDJeB0VmvV3g_HpU_kVe3L6SHMOOnYxeTCmxpADDNaiN7ysO_SRmuOh-6QTsuXQnsy1T8JxgRzFdIxk3ZtmE9bA5ua-q0UfWcwsUyiOKBzfMn2s7aNUEtMLgofeBGIbDvptrBDO3LuJ_OHi-OrW1peQ?key=JSNMgaamRsns2DBiowR75RYx" alt=""><figcaption></figcaption></figure>

To access the CSS code for this barchart customization:

{% content-ref url="deep-customization-chart-css/chart-customization" %}
[chart-customization](https://docs-v3.toucantoco.com/tutorials/advanced-tutorials/deep-customization-chart-css/chart-customization)
{% endcontent-ref %}

### Dashboard

{% hint style="info" %}
To ensure your custom charts and tiles appear correctly in the dashboard, make sure to first customize them in the homepage and stories.
{% endhint %}

For the dashboard, here’s an example of a futuristic dark mode style, enhancing both visual impact and readability:

<figure><img src="https://lh7-qw.googleusercontent.com/docsz/AD_4nXfyvY5tPBtrrJuhGuYDhnukEKsuTnvYTuGeCcgpoM7wg7mScz-wUv4xjJIP0uj9akgVs2lJgHsf5Zw7Nm9l29F_mcd88kwiE5V-Xzo6wa0_pwQWmoObGAz303zLuaKXaEiLuJYuPK6uPVTsZOB30fdvcUnw?key=JSNMgaamRsns2DBiowR75RYx" alt=""><figcaption></figcaption></figure>

To access the CSS code for this customized dashboard:

{% content-ref url="deep-customization-chart-css/dashboard-customization" %}
[dashboard-customization](https://docs-v3.toucantoco.com/tutorials/advanced-tutorials/deep-customization-chart-css/dashboard-customization)
{% endcontent-ref %}

## Find the elements to customize

To apply custom styles, start by identifying the correct element selectors using your browser’s inspect tool. This helps you preview changes in real-time, view associated classes and IDs, and test various options directly on the page. Once you’ve confirmed the desired styles, add the chosen classes to your custom CSS in the section: Customization > Theme > CSS Custom.

<figure><img src="https://lh7-qw.googleusercontent.com/docsz/AD_4nXdr20Td_DCS9geg3hn-mGsDjNEJkaXN_5-zu2L-apz2sei5hWt4ArPxZZsV04Mli952yx_e-YfShQ2zXoLeXcNiRfiMVuaSfkxNcHmiXv80ZPtpVVg7IRp9NQT2FCU21AYG606ZUQ?key=JSNMgaamRsns2DBiowR75RYx" alt=""><figcaption><p>Right click > inspect</p></figcaption></figure>

{% hint style="danger" %}
Class names may occasionally change to improve our product's quality. If you encounter this, locate the updated class name and add it after the original class used for your customization. This ensures your styles remain correctly applied to the updated elements.\
For example: .dDCHxK {}

Alternatively, to avoid relying on dynamically generated class names, you can use the child combinator in CSS to target specific elements.\
For example: .small-app-home\_\_content > div:nth-child(1) > div:nth-child(1) {}

This approach ensures your styles remain stable, even if class names are updated in the future.
{% endhint %}

## Simplify the modification of a specific chart with CSS

If you’d like to modify a **specific** chart in a story, you have two options:

<figure><img src="https://lh7-qw.googleusercontent.com/docsz/AD_4nXdcb0NSoIrc3yuFdjRyuyEuY1QvrnYBVN1XBLwMRFOeNJGKujyxPCigav9RMQzAZzEYyiDoNFOhiSsd6bt6e-0RntgcbnKG3lU_WJU8R62BKMsLRbX6PUdfPKy4jDV3KK8002B8?key=JSNMgaamRsns2DBiowR75RYx" alt=""><figcaption></figcaption></figure>

* You can either use the **Custom Class CSS** available in Chart editor > Display > Custom Class CSS. Then, in the custom CSS (customization section), you will need to add the class (like in the example, .bar-chart-example) and modify the styles of the elements you want to change using CSS.
* You can make adjustments directly in **the Code Editor** by manually adding the custom class name (like in the photo below) in the type area. Then it works like the Custom CSS Class.

<figure><img src="https://lh7-qw.googleusercontent.com/docsz/AD_4nXfLC5o4R0GXVqQ3sDpyMsTjLnkLV9WPBjiAo__nipo1fPL5m_bAVua379aSBk1CSfOlL5VfW941Z6q8vGavNKnqGh628xiAQpsBEgHyLA9Ty9OFmj5zvjGtUZdtav97NME3mTd0fQ?key=JSNMgaamRsns2DBiowR75RYx" alt=""><figcaption></figcaption></figure>

Both options allow you to customize the chart’s appearance to your needs.

## Bonus

You can add simple CSS animations to enhance your app’s visual experience:

<figure><img src="https://1809014303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZxYYf1KpgarKMgMsDCrw%2Fuploads%2Fgit-blob-86b39345312a3debfc976375bd659521c0d3c8d7%2Fezgif-6-7f00dc4bf0.gif?alt=media" alt=""><figcaption></figcaption></figure>

This is the code for this simple card/tile animation:

```css
/* Tile CSS animation */

.home-tile__content {
 border-radius: 12px !important;
}

.smart-home-tile:hover {
 bottom: 5px;
 box-shadow: 0px 5px 0px #183C59;
 transition: 0.2s;
}
```

If you need inspiration for your header, here is an example:

<figure><img src="https://1809014303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZxYYf1KpgarKMgMsDCrw%2Fuploads%2Fgit-blob-99b0a3eba527ee1f022934bd2637eb682a902a28%2FCapture%20d%E2%80%99e%CC%81cran%202024-12-02%20a%CC%80%2010.33.01.png?alt=media" alt=""><figcaption></figcaption></figure>

You will find the code for this glassmorphism effect header below:

```css
/* Glassmorphism effect header */

.small-app-home__content > div:nth-child(1) > div:nth-child(1) {
  backdrop-filter: blur(8px) saturate(0.7) brightness(1.2) drop-shadow(2px 4px 6px black) !important;
  box-shadow: inset 0 0 0 200px rgba(255,255,255, 0.1), 2px 4px 6px rgba(0,0,0,0.1) !important;
  background-color: rgba(253, 255, 255, 0.1) !important;
}
```

Feel free to experiment with these examples to achieve the desired look and feel for your application ! By combining and adjusting styles, you can create a tailored visual experience that reflects your brand’s identity and meets your layout needs.