How to :: change colors and update charts’ css

Two preset designs are available in the “Change colors” interface :

  • energic toucan
  • quiet toucan presets

Personalizing the small app design is also possible by changing the hexadecimal colour code.

Do not forget to save your changes.

Specific stylesheets

To cover specific design needs for a screen for instance, specific stylesheets can be registered. Here are some usecases :

In an HorizontalBarchart, to set a color (#C80E0E = red) to a label (=”no”): .bar[data-serie=”no”] { fill: #C80E0E !important; } .group-color[data-serie=”no”] { background-color: #C80E0E !important; }

In the homepage, to delete the report pop-up icone : .show-report-container { display: none !important; }

In a linechart, to set a stroke-dasharray (on “Target” in the example below) :

linechart g.serie[data-serie=”Target”] path { stroke-dasharray: 5,5; }

Apply specific style to a selected slide / tile

You can apply a specific styling rule to a dashboard tile or a slide by adding a custom class to the wanted object.

In the config object of the tile / slide, add `style`: 'my_custom_class' and you’ll be able to insert you specific rules in the specific stylesheet like this

.my_custom_class {
  font-size: 14px;
}

In a dashboard tile add this property at the same level as name, in a chart object add it in chartOptions.

CSS Color management

Selecting colors from your theme

Once you set your theme colors you will want to be able to reuse those colors in your CSS configuration. One typical use case of this is when you have one category of data that appears all across your app in different charts. In case your theme colors change you won’t want to review all your CSS to change all the colors. The best way to achieve this is to refer to color names in your theme, so if the theme changes all the colors will be updated.

The available theme color names are:

  • Brand: $main-color
  • Discrete brand: $main-color-fade
  • Text: $text-color
  • Dark: $dark-color
  • Emphasis: $emphasis-color
  • Accent: $secondary-emphasis-color
  • Serie #1: $chart-color-0
  • Serie #2: $chart-color-1
  • Serie #3: $chart-color-2
  • Serie #4: $chart-color-3
  • Serie #5: $chart-color-4
  • Serie #6: $chart-color-5
  • Quartile #1: $scale-color-0
  • Quartile #2: $scale-color-1
  • Quartile #3: $scale-color-2
  • Quartile #4: $scale-color-3

If you change the hexadecimal code of Serie #1 the value of $chart-color-0 will be changed allover your stylesheet. So if you are consistent in using these names in your styles you will be able to modify your themes almost effortlessly.

Widgets

Ex:1 Widget image

In a dashboard tile, use the asset name as the src:

Configuration

type: "media-img"
src: "my_dashboard_asset"

Ex2: Widget text

An asset can be used in html code via the custom asset attribute:

Configuration

<p>My text</p>
<img asset="my_asset"></img>

Charts

Color all the charts bars/lines/circles in the app, depending on a specific label, serie group or subgroup.

You can use this snippet to color all graphical elements in charts (bars, lines, bubbles) in the app, depending on a specific label, serie or group.

@include colorChartsElementsByName("France", #96c4b9!important);

The first parameter correspond to your label/serie/group/subgroup, and the second parameter is the color.

Works with:

  • Barchart (with more than one color)
  • Bar Linechart
  • Bubble chart (new and legacy)
  • Horizontal barchart (new and legacy)
  • Linechart
  • Radar chart
  • Stacked barchart (new and legacy)
  • Waterfall chart

⚠️ This code will color all the bars/lines/bubbles in your app with this label/serie/group/subgroup.

Ex:1 Bubble chart

  1. Color a Bubble depending on the label

    .circle-main[data-group="demanding"] { fill: #B5B5B5 !important; }
    
  2. Color a Bubble depending on the label

    .circle-main[data-group="demanding"] { fill: none !important; }
    
  3. Color the stroke depending on the label

    .circle-main[data-group="demanding"] { stroke: #B5B5B5 !important; }
    
  4. Disable the stroke depending on the label

    .circle-main[data-group="demanding"] { stroke: none !important; }
    
  5. Disable labels but keep the report selected highlighted

    .bubblechart__label {display: none;}
    .bubblechart__label.highlighted { display: block!important;}
    
Color the bubble

Color the bubble

Ex2: Leaderboard

  1. Color the bar depending on the label

    .bar[data-subgroup="female"] { fill: #CC3366 !important; }
    
  2. Color the text depending on the label

    [data-group="just-dance-now"] text {fill: #FFCB31;}
    
    Colored leaderboard

    Colored leaderboard

Ex3: Stackedbarchart

  1. Color a serie depending on the label

    .bar[data-subgroup="social"] { fill: #A0A0A0 !important; }
    .group-color[data-serie="social"] { background-color: #A0A0A0 !important; }
    
Colored stackedbarchart

Colored stackedbarchart

Ex4: Linechart

  1. Color a line

    linechart g.serie[data-serie="peugeot"] path {  fill: #253F62; }
    
  2. Stroke a line

    linechart g.serie[data-serie="target"] path {  stroke-dasharray: 5,5; }
    

Ex5: Barchart

  1. Color a serie

    [data-label="PS4"] rect.vertical-bar__bar {  fill: #002b8d  !important; }
    [data-serie="PS4"] div.tc-legend-ordinal__serie-color{ background-color: #002b8d  !important; }
    
Colored barchart

Colored barchart

  1. Pivot absciss labels

⚠️ if you want to pivot your labels ask yourself these two questions first: ⚠️

  • Is my label too long? Can I work on the wording?
  • Am I using the correct viz? Should I switch to an horizontal barchart?

In which case am I allowed to pivot my labels? Toucan Toco recommand it only for dates. But make sure it looks great on mobile too if you’re doing it. Remember, Toucan is expert on data viz, Ux and design, we’ve made some design choices, make sure to follow them :)

Otherwise, if you still think it’s a good idea to pivot your labels, this is how you do it:

.bar-chart .x.axis .tick text {
  transform: rotate(-40deg) translate(-25px,0px);
  font-size: 10px;
}
Pivoted label barchart

Pivoted label barchart

Ex6: Horizontal Barchart

  1. Color a pack

    g[data-pack="PackValue1"] rect.bar { fill: #004196 !important; }
    g[data-pack="PackValue2"] rect.bar { fill: #002b8d !important; }
    

Ex7: Funnelchart

  1. Do not display the evolutions between the bars

    text.funnel-chart__fall-out-variation {
    display: none !important;
    }
    
  2. Color all the bars of the Funnelchart

    .funnel-chart__bar { fill: #A0A0A0 !important; }
    

Ex8: Waterfall chart

  1. Change the colors of the variation bars

You can set up the color used for positive and negative variation

.waterfall-chart__bar-group--positive rect.vertical-bar__bar,
.waterfall-chart__bar-group--positive .vertical-bar__bar-value,
.waterfall-chart__bar-group--positive .vertical-bar__bar-variation {
    fill: #376db3 !important;
}
.waterfall-chart__bar-group--negative rect.vertical-bar__bar,
.waterfall-chart__bar-group--negative text.vertical-bar__bar-value,
.waterfall-chart__bar-group--negative .vertical-bar__bar-variation {
    fill: #9B2156 !important;
}

Ex:3 Heatmap chart

Get your x labels on 2 lines: Add style: "your_style" in chartOptions then go to the Color Scheme Menu and add this in the Specific Stylesheet section:

.your_style .tc-heatmap__x-label {
display: flex;
align-items: center;
justify-content: center;
height: 35px;
white-space: normal;
top: 10px;
}

Others

  • Modify the size of the police in the chapters Change 20px in order to resize
nav-menu-chapter .chapter > .title {
  font-size: 20px;
}
  • Modify the size of the commentary box on top of the screens:
.slide-commentary-container { height: 70px; }
  • Reduce the font size of the commentary
  1. in your front config, declare a new class:

    "<span class='commentary-change'>Change selected period in the right settings panel.</span>"
    
  2. Enter in the CSS:

    .commentary-change {
    font-size: 12px;
    }
    
  • Bold the execsumTitle
.execsum-note{ font-weight:bold; }

Add icones and images

You can add icones and image that are encoded in unicode :) Go here for a complete description of available symbols and this is a live example.

To use those symbols you just have to copy and paste the symbols in your config file inside quote (as for text):

title:"♔ this a a pimped title ☝"