theme: String

Sets the theme of the Chart. Various predefined themes are bundled along with the library. User can easily switch these themes by changing theme property to the below mentioned options.


Default: “light1”
Options: “light1″,”light2”, “dark1”, “dark2”

Notes
  • Properties set anywhere in chart options will override the values set by theme.
  • New Themes have been added and old themes (“theme1”, “theme2”, “theme3”) have been deprecated since v2.0
  • New Themes introduced in v2.0 have been categorized into two – light and dark. And available options are ‘light1’, ‘light2’, ‘dark1’, ‘dark2’
  • Old themes ‘theme1’, ‘theme2’, ‘theme3’ that are deprecated in v2.0 have been linked to ‘light1’ and ‘light2’


var  chart =  new  CanvasJS.Chart("container",
{
 .
 theme: "light2", //"light1", "dark1", "dark2"
 .
 . 
});
chart.render();


Try it Yourself by Editing the Code below.

  Also See:    



If you have any questions, please feel free to ask in our forums.Ask Question

Comments 9

  1. Love your lib, you guys did a great job. But please add this 3 lines of code and let us add our own themes. The best chart lib is kind of useless if it’s not visual adaptable to the rest of the website.

    • Hello,

      Thanks for your suggestion. We are implementing custom themes in our next version which you can expect within a week. For now you can consider using custom colorSet.

If you have any questions, please feel free to ask in our forums. Ask Question