Keeping Colors Consistent in HTML5 Charts
Last updated
Was this helpful?
Last updated
Was this helpful?
Colors in charts may get mis-matched or mis-aligned when the dataset does not include students at each performance level.
In this example, we want the colors in the left chart to match the colors in the right chart, even when not all four performance levels are represented. For example, we want the “On” category to always be blue, no matter how many performance levels are represented in the dataset.
In order to ensure the colors for each performance level remain consistent even when the dataset does not include students at each performance level, we need to use the Bucket Properties in the HTML5 charts.
Double-click on the chart
Click Chart Data
Click Configuration
Double-click on the Series Levels
In this example, the “Series Levels” represent the 4 performance levels that create the individual bars in the stacked bar chart.
Click on Bucket Properties Tab
Click Add
Set the Property name to color
Write a conditional expression that outputs the “hex code” color value for each performance level in your chart.
For this example, the conditional expression looks like this:
The output for each conditional expression is the “hex code” - a six-digit code that signifies the color you want for each performance level.
Back on the Chart Configuration screen,
Double-click on your Measure
Click Advanced Properties tab
Click Add
Set Contributor to SeriesProperty
Set Property Name to color
Select Use Bucket Value
Choose the .color Bucket Value Property you created
Click OK
There are countless websites that will provide the hex code for whatever color you want. For example, .
You’re done! The colors in your chart should now be consistent, no matter how many performance levels are represented in the dataset.
