colorSet: String

Sets the colorSet of the Chart. Color Set is an array of colors that are used to render data. Various predefined Color Sets are bundled along with the library. You can either choose from the pre-defined Color Sets or define your own Color Set.


Default: “colorset1” or as defined in the selected theme
Example: “colorSet1”, “colorSet2”, “colorSet3”

Notes
  • Currently there are three colorSets bundled with the library. We’ll be adding more in the coming versions.


Defining a custom Color Set:

CanvasJS provides a way to add custom colorSet to the library. Color Sets added in this manner are global and they can be used by any chart in the page.

Syntax: CanvasJS.addColorSet(colorSetName, colorSetArray)

Example:
CanvasJS.addColorSet(“customColorSet1”,
     [//colorSet Array
     “#4661EE”,
     “#EC5657”,
     “#1BCDD1”,
     “#8FAABB”,
     “#B08BEB”,
     “#3EA0DD”,
     “#F5A52A”,
     “#23BFAA”,
     “#FAA586”,
     “#EB8CC6”,
    ]);


var  chart =  new  CanvasJS.Chart("container",
{
 .
    colorSet:  "customColorSet1",
 .
 . 

});
chart.render();


Try it Yourself by Editing the Code below.

  Also See:    



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 23

  1. Pingback: CanvasJS Charts are out of Beta! - CanvasJS

  2. With this service is there a way to specify the color of the lines connecting data markers on a line chart?

  3. when i copy this code and execute it in offline,I’m not able to view any pie chart….
    i think its because of that js file included in script…..
    How can i get thet file and create a comlete pie chart offline….

  4. yes Tomer: var colors = [“#0066FF”, “#7385AA”, “#ACD373”, “#DF656A”];
    dataPoints.push({label:report[i].description,y:report[i].mtd,color:colors[i]});

  5. i cant able to use it along with jquery..
    If there is jQuery library, the chart wont display. Please give a solution.
    Thanks in advance…

  6. I Want to change the colorSet Dynamically please direct here:
    Problem: Im getting the JSON vlaue form a DB and i want to convert to array and render the chart.
    like..
    $rootScope.setupData.colorset; //JSON ARRAY VALUE “[#ffffff,#00000″]”

    im trying to JSON.parse () and eval() i didn’t go.t

    and i tried .
    CanvasJS.addColorSet(“customColor”,//colorSet Array
    $rootScope.setupData.colorset);

    Please Soon send me right manner to represent the colorset..

  7. Can this colorset work in line graph? I need a color when graph goes up and different color when graph goes down?

  8. how can i give my own colors.. instead of wt they gave… and one more thing i dont want to pass colors through json

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.