All Collections
Design your floor plan
Designing charts for dark backgrounds
Designing charts for dark backgrounds

Configuring for light or dark background, color palettes and user interface.

Pablo Neirotti avatar
Written by Pablo Neirotti
Updated over a week ago

Setting the background

All charts in Seats.io are transparent. You can set the background of an embedded chart by setting the background color of the container div or page where the chart will be shown on your web application.

Previewing dark charts in the Designer

That said, you might want to change the color of the canvas in the Designer to preview your chart with the correct background. You can do so by clicking the Sun icon at the top left of the designer:

Additionally, all the color palettes will be swapped for similar ones that work best in the dark, to ensure you pick category colors that contrast best against dark, and shape colors that harmonize best with dark backgrounds.

Only allowing one color scheme in the designer

If your website will only have either light or dark background charts, you can enforce a particular color scheme when embedding the Designer in your web application and configuring the canvasColorScheme parameter. Doing so will remove the button from the toolbar, as the user will no longer have agency on this aspect.

Using a dark User Interface in the Renderer

The Renderer and Event Manager can be configured to use a dark user interface to fit your dark web application. You can configure in the embed settings with the colorScheme parameter.

Did this answer your question?