Deep customization chart (CSS)
Last updated
Was this helpful?
Last updated
Was this helpful?
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:
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!
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.
In this example, the homepage reflects a theme for eco-friendly or sustainable branding.
To access the CSS code for this customized homepage:
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.
To access the CSS code for this barchart customization:
For the dashboard, here’s an example of a futuristic dark mode style, enhancing both visual impact and readability:
To access the CSS code for this customized dashboard:
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.
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.
If you’d like to modify a specific chart in a story, you have two options:
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.
Both options allow you to customize the chart’s appearance to your needs.
You can add simple CSS animations to enhance your app’s visual experience:
This is the code for this simple card/tile animation:
If you need inspiration for your header, here is an example:
You will find the code for this glassmorphism effect header below:
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.
