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.

The Theme Preview can also be used to view the source code of the applied theme which can be useful for learning how to construct custom themes or specific enhancements.

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);

Can be used to load Highcharts plugins and modules in addition to custom themes.

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 theme and a handful of preset dataZoa options for full flexibility.
• Only options and properties recognized by Highcharts will have an affect... Highcharts Options Reference
• Widgets are loaded with Highcharts v6.0.4 and the following modules: Data, 3D, Boost, More and Exporting
• Use the full Preview tab to visualize the affects of enhancements. Such changes are not reflected in the Theme Preview.

Description or enhancement	Code for enhancement
Move legend to right of chart (particularly useful for pie type displays).	{ legend: { layout:'vertical', align:'right', verticalAlign:'middle' } }
Prevent a series from being removed when clicking it within the legend (for non-pie type displays).	{ plotOptions: { series: { events: { legendItemClick:function () { return false; } } } } }
Prevent a series from being removed when clicking it within the legend (for pie type displays).	{ plotOptions: { pie: { point: { events: { legendItemClick:function () { return false; } } } } } }

Description or enhancement	Code for enhancement
Enable crosshairs on hover for: [x-axis, y-axis]	{ tooltip: { crosshairs:[false, true] } }
Set tooltip prefix, suffix, decimals and date format (%B= Month full name, %b = Month abbreviation, %m = Month number, %d = Day number %y = 2 digit year, %Y = 4 digit year).	{ tooltip: { valuePrefix:'$', valueSuffix:' USD', valueDecimals:2, xDateFormat:'%b-%d-%Y' } }
Separate tooltips for each series displayed one-at-a-time (e.g. for whichever series is being hovered over).	{ tooltip: { shared:false } }
Separate tooltips foe each series displayed simultaneously.	{ tooltip: { split:true } }

Description or enhancement	Code for enhancement
Point markers displayed only while hovering.	{ plotOptions: { series: { marker: { enabled:false, states: { hover: { enabled:true } } } } } }
Point markers displayed larger on hover (doesn't force point markers with lots of data).	{ plotOptions: { series: { marker: { radius:3.5, states: { hover: { radius:7 } } } } } }

Description or enhancement	Code for enhancement
Change y-axis to logarithmic scale.	{ yAxis: { type:'logarithmic' } }
Display y-axis on opposite (right) side.	{ yAxis: { opposite:true } }
Force y-axis labels to use 2 decimal points of precision.	{ yAxis: { labels: { format:'{value:.2f}' } } }
Add prefix/suffix to y-axis labels.	{ yAxis: { labels: { format:'${value} USD' } } }
Add prefix/suffix to y-axis labels while maintaining normal value decimating.	{ yAxis: { labels: { formatter:function(){ return '$'+this.axis.defaultLabelFormatter.call(this)+' USD'; } } } }
Paint horizontal bands of color between every other grid line.	{ yAxis: { alternateGridColor:'#F0F0F0' } }

Description or enhancement	Code for enhancement
Show vertical grid lines.	{ xAxis: { startOnTick:true, endOnTick:true, gridLineWidth:1 } }
Hide the x-axis.	{ xAxis: { visible:false } }