Report Element Colors

How to apply matching colors between different chart types

Unfortunately Knack does not apply the default HighCharts colors for bar charts and only gives the bar elements the first blue color. To increase clarity when comparing charts, we manipulate each individual bar so that is matches its corresponding pie chart color. Below is the list of the Default HighChart Colors.

  1. #7cb5ec

  2. #434348

  3. #90ed7d

  4. #f7a35c

  5. #8085e9

  6. #f15c80

  7. #e4d354

  8. #2b908f

  9. #f45b5b

  10. #91e8e1

The JS

None needed 😎 though we do use the Global HighCharts Report Styling

The CSS

There are several different situations, based on the number of calculated elements in a chart, that determine what kind of selector we use to change the colors.

If you have 10 or more elements (values) being calculated, you can use a simplified notation the negates the need for more than 10 lines of code

#kn-report-view_1369-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(10n){fill: #91e8e1;}
#kn-report-view_1369-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(10n+1){fill: #7cb5ec;}
#kn-report-view_1369-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(10n+2){fill: #434348;}
#kn-report-view_1369-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(10n+3){fill: #90ed7d;}
#kn-report-view_1369-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(10n+4){fill: #f7a35c;}
#kn-report-view_1369-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(10n+5){fill: #8085e9;}
#kn-report-view_1369-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(10n+6){fill: #f15c80;}
#kn-report-view_1369-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(10n+7){fill: #e4d354;}
#kn-report-view_1369-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(10n+8){fill: #2b908f;}
#kn-report-view_1369-1 div.highcharts-container svg g.highcharts-series-group g.highcharts-series rect:nth-child(10n+9){fill: #f45b5b;}

How to Implement

You can simply copy the CSS above that is applicable depending on how many elements you have, what chart you are manipulating, and what colors are being used.

The report View ID will need to be updated for each line. Additionally, the number after the View ID indicates which report in the report view you are manipulating. For example if you had 2 reports in a view, the first would be 1, the second would be 2. With the New Knack Builder, it is not recommended to have more than 2 reports per report view so that report views can easily be managed and copied.

/*Report 1 in the View*/
#kn-report-view_1317-1

/*Report 2 in the View*/
#kn-report-view_1317-2

Lastly, if you have both a bar chart and pie chart next to each other where you want to match colors, there is one final thing that must be done. Navigate to the pie chart Chart Properties data section

Select the cog and set the legend order to be in reverse alphabetical

Counter-intuitive to what you would expect, doing this displays the pie chart legend in proper alphabetical order so the legend colors match the pie slice colors which in turn will match the bar chart colors if you apply the default HighChart colors.

More Info

If you want to see more about :nth-child() Pseudo Class Selectors in the Mozilla developer docs.

PreviousReport Filters Container SizeNextHighCharts Report Styling

Last updated