There are 3 different ways to update charts colors in Canvas:
- Update the default application color scheme.
- Define the color scheme in the chart property.
- Define the color of a specific chart element.
Update the default application colour scheme
In Canvas, when you create a chart, if you do not specify any colors, the chart will take the default application colors. These default colors are defined in the instances.json file in the WEB-INF folder of your application:
Colours are defined in CSS colour format. You can find lots of colour supported by all browser in w3schools website:
You can get more colours by clicking on the Shades button:
Let’s update the instances.json file with the following colours:
"chartColorScheme"=["#0000ff", "#3333ff", "#6666ff", "#9999ff", "#b3b3ff"]
For Canvas to pick up the changes in the instances.json file, you have to restart the Cubewise Application Server. Then refresh your page and you should see the new colours:
Define the colour scheme in the chart property.
You can override the application default scheme by adding the tm1-color-scheme attribute to the tm1-ui-chart:
tm1-color-scheme='["#009900", "#00b300", "#00cc00", "#00e600", "#00ff00"]':
Save the page and refresh your web browser, you should now see new colours:
Define the colour of a specific chart element
You can override the chart colour scheme for a specific bar by adding the tm1-color attribute to the tm1-ui-chart-dbr:
tm1-color ="#000000”
Let’s add this attribute to the first bar:
Save and refresh your page, you should now see the first bar with a black colour:
