Difference between revisions of "Widget Editor Theme Tab"

Select a theme to use in applying colors and style to the Widget. There are a handful of preconfigured themes to choose from with their basic affects visible in the Theme Preview to the right.

Optionally bypass all the preconfigured themes by linking to a custom remote theme file.

• Using https is required to ensure proper loading of themes
• Themes are JavaScript files which set and apply Highchart options
• Namespace your theme object as: Highchart.theme = {...}
• After creation, apply your theme via: Highcharts.setOptions(Highcharts.theme);

Enhance or override any setting of the applied theme (e.g. add a subtitle, change fonts, refine tooltip behavior...)

• Enhancements must be entered as a valid JavaScript object literal which will be applied after the applied theme and a handful of preset dataZoa options for full flexability.
• Only options and properties recognized by Highcharts will have an affect... Highcharts Options Reference
• Widgets are loaded with the following Highcharts modules in affect: Data, 3D, Boots, More and Exporting
• Use the full Preview tan to visualize the affects of enhancements. Such changes are not reflected in the Theme Preview.

Enhancement Examples:

{
   legend: { layout:'vertical', align:'right', verticalAlign:'middle' }
}

{
   tooltip: { crosshairs:[true] }
}

{
   tooltip: { crosshairs:[false, true] }
}

{
   tooltip: { crosshairs:[true,true] }
}

{
   yAxis: { type:'logarithmic' }
}

{
   yAxis: { opposite:true }
}

{
   yAxis: { labels: { format:'${value} USD' } }
}

{
   yAxis: { labels: { formatter:function(){ return '$'+this.axis.defaultLabelFormatter.call(this)+' USD'; } } }
}

{
   yAxis: { labels: { format:'{value:.2f}' } }
}