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
Or if you would like to modify the colors to a pie chart, you need to change the color for both the pie slice and the rect legend element. In this example we specify unique colors that match the RPP zone colors.
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
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 .
None needed 😎 though we do use the
If you want to see more about in the Mozilla developer docs.
