API Reference
Namespaces
Classes
Events
Global
Externals

Class: ThemeHelper

CIQ. ThemeHelper


new ThemeHelper(params)

Generates an object that can be used programmatically to load new themes or to create a theme dialog to manage chart themes. The initial values contain the existing values in the current chart. Simply have your dialog modify these values and then call the method CIQ.ThemeHelper#update

Note that the chart has many granular customizations beyond what this theme helper produces. This helper simplifies and consolidates into a manageable set. For example, 'hallow candles', 'bars', and 'candles' colors are all grouped together. But if you need to separate those out, just call an explicit CIQ.ChartEngine#setStyle for each CSS style right after the ThemeHelper is executed.

For example, this will further set the color for the hollow_candle chart type:

stxx.setStyle("stx_hollow_candle_down","color",'blue');
stxx.setStyle("stx_hollow_candle_up","color",'yellow');
stxx.setStyle("stx_hollow_candle_even","color",'pink');
stxx.draw();

See Chart Styles and Types for more details.

Themes can be managed by simply adding or removing from the chart context the class name that groups the theme together. And if the CSS contains an entry for that class, the chart will display the styles in the class when enabled.

For example, assume the chart has a default theme and a second theme called 'ciq-night'. Here are some examples of what CSS entries for those classes would look like:

// default theme (day) styles
.stx_candle_shadow, .stx_bar_even {
		color:#2e383b;

}
.stx_candle_down, .stx_line_down {
		border-left-color: #000000;
}

// night theme override styles
.ciq-night .stx_candle_shadow, .ciq-night .stx_bar_even {
		color: #ccc;
}
.ciq-night .stx_candle_down, .ciq-night .stx_line_down {
		border-left-color: #e34621;
}

Then to activate a particular theme, you either remove the specific class to enable default (day):

document.querySelector("cq-context").classList.remove('ciq-night');
// clear out the old styles to allow new ones to be cached in; and redraw.
stxx.styles={};stxx.draw();

Or add a particular class to enable those styles:

document.querySelector("cq-context").classList.add('ciq-night');
// clear out the old styles to allow new ones to be cached in; and redraw.
stxx.styles={};stxx.draw();

You can use this method to set as many themes as needed. Remember that this method, requires all styles to be present in the CSS. ThemeHelper, on the other hand, will programmatically set the styles internally, one at a time, regardless of pre-existng CSS classes.

Parameters:
Name Type Description
params object

Parameters

Properties
Name Type Description
stx CIQ.ChartEngine

A chart object

Since:
  • 6.2.0 Added support to control Mountain.basecolor.

Example
var helper=new CIQ.ThemeHelper({stx:stx});
console.log(helper.settings);
helper.settings.chart["Grid Lines"].color="rgba(255,0,0,.5)";
helper.update();

Members


settings :object

Current theme settings. These are the settings that are ready to be loaded, or currently loaded. Modify as needed. To load these settings call CIQ.ThemeHelper#update

Type:
  • object
Example
//Default settings object structure
	"chart":{
		"Background":{
			"color":color1
		},
		"Grid Lines":{
			"color":color2
		},
		"Grid Dividers":{
			"color":color3
		},
		"Axis Text":{
			"color":color4
		}
	},
	"chartTypes":{
		"Candle/Bar":{ // also manages 'hollow candle', 'colored line' and 'colored baseline' chart types.
			"up":{
				"color":color5,
				"wick":color6,
				"border":color7
			},
			"down":{
				"color":color8,
				"wick":color9,
				"border":color10
			},
			"even":{		// colors used when the current close is equal to the previous close.
				"color":color11,
				"wick":color12,
				"border":color13
			}
		},
		"Line":{
			"color":color14
		},
		"Mountain":{
			"color":color15,
			"basecolor":color16
		}
	}

Methods


update( [stx])

Call this method to activate the chart theme with values set in CIQ.ThemeHelper#settings

Parameters:
Name Type Argument Description
stx CIQ.ChartEngine <optional>

Chart engine to apply the changes to.

Since:
  • 4.1.0 Added optional chart engine parameter.
  • 6.2.0 Now setting base color and color of mountain chart with separate colors.
  • 6.3.0 Colored Bar, Hollow Candle, Volume Candle charts now use chartTypes["Candle/Bar"].even.color for even bar color.
Example
var helper=new CIQ.ThemeHelper({stx:stx});
console.log(helper.settings);
helper.settings=NewSettings;
helper.update();