colorSet: String

Sets the colorSet of Navigator. Color Set is an array of colors that is used to set the color of individual dataSeries in a sequence. 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 as shown in this tutorial.


Default: Inherits from parent StockChart’s colorSet property.
Options: “colorSet1”, “colorSet2”, “colorSet3”

Defining a custom Color Set:

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

Syntax: CanvasJS.addColorSet(colorSetName, colorSetArray)

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


Once a Color Set is added, you can refer to it by name – similar to pre-defined ones. Below is the syntax showing how to use it.

var stockChart = new CanvasJS.StockChart("container",
{
  .
  .
  navigator: {
    .
    .
    colorSet: "customColorSet1"
    .
    .
}

  .
  . 
});
stockChart.render();



Try it Yourself by Editing the Code below.




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