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 Editing The Code

  Also See:    

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

23 Comments

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

  2. Zach says:

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

  5. Dhanveer says:

    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….

  6. Sammi says:

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

  8. amar says:

    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…

  9. balu says:

    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..

  10. Vinsly bright says:

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

  14. naresh says:

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

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