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: