Keeping Colors Consistent in HTML5 Charts
The Problem
Colors in charts may get mis-matched or mis-aligned when the dataset does not include students at each performance level.
Example
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.
The Solution: Bucket Properties
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.
Directions
Step 1: Navigate to Chart Configuration Screen
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.
Step 2: Add the “color” Bucket Property
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.
There are countless websites that will provide the hex code for whatever color you want. For example, this Color Picker Tool will give you the hex code for whatever color you choose.
Step 3: Add “color” Advanced Property to your Measure
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
Last updated
