Getting started
Chart interface
Web components
Chart internals
Data integration
Frameworks and bundlers
Mobile development
Time Span Events
Term structures

Matching colors across studies

The CIQ.Studies.studyLibrary in studies.js defines the color schemes for any and all studies. For maximum flexibility, each study has been given the ability to be rendered with different colors for each of its elements.

For example, the Aroon study declaration looks as follows:

Aroon: {
	range: "0 to 100",
	calculateFN: function(stx, sd) {
		return CIQ.Studies.calculateAroon(stx, sd);
	outputs: { "Aroon Up": "#00DD00", "Aroon Down": "#FF0000" }

It is here where you would override the pre-set colors for the "outputs". You can link schemes together by declaring variables for your global colors and then replacing on each study as needed. This will allow you to link them to your own scheme without having to manually modify the css or individually changing each output color value.


var upColor = "black";
var downColor = "red";

The in the study library you would use these global values as needed:

"ATR Trailing Stop": {
	overlay: true,
	seriesFN: CIQ.Studies.displayPSAR2,
	calculateFN: function(stx, sd) {
		return CIQ.Studies.calculateATRStops(stx, sd);
	inputs: {
		Multiplier: 3,
		Period: 21,
		"Plot Type": ["points", "squarewave"],
		HighLow: false
	outputs: { "Buy Stops": downColor, "Sell Stops": "upColor" }
"Ehler Fisher": {
	calculateFN: function(stx, sd) {
		return CIQ.Studies.calculateEhlerFisher(stx, sd);
	inputs: { Period: 10 },
	outputs: { EF: downColor, "EF Trigger": upColor }

To dynamically change the colors on all linked studies, you would simply assign a new color value to the new variables.

Next steps