Apr 4, 2017

    Change the default colors of a chart

    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:

    Related content

    Loading related content