Difference between revisions of "Widget Editor Theme Tab"
From dataZoa Wiki
m |
m |
||
| Line 21: | Line 21: | ||
<div style="margin: 2em; margin-left: 6em;"> | <div style="margin: 2em; margin-left: 6em;"> | ||
Enhance or override any setting of the applied theme (e.g. add a subtitle, change fonts, refine tooltip behavior...) | 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 [[ | + | * Enhancements must be entered as a valid [[Javascript Object Literal|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... [https://api.highcharts.com/highcharts/ Highcharts Options Reference] | * Only options and properties recognized by Highcharts will have an affect... [https://api.highcharts.com/highcharts/ Highcharts Options Reference] | ||
* <div class="imgGlyph24 imgNote"></div> Use the full <b>Preview</b> tan to visualize the affects of enhancements. Such changes are <i>not</i> reflected in the <i>Theme Preview</i>. | * <div class="imgGlyph24 imgNote"></div> Use the full <b>Preview</b> tan to visualize the affects of enhancements. Such changes are <i>not</i> reflected in the <i>Theme Preview</i>. | ||
| Line 27: | Line 27: | ||
<br>Examples: | <br>Examples: | ||
<table class="Gbb1" style="width:100%;"> | <table class="Gbb1" style="width:100%;"> | ||
| − | <tr><td>Description</td><td>Code</td></tr> | + | <tr><td>Description or enhancement</td><td>Code for enhancement</td></tr> |
<tr><td>Move legend to right of chart (particularly useful for pie type displays).</td> | <tr><td>Move legend to right of chart (particularly useful for pie type displays).</td> | ||
<td> | <td> | ||
Revision as of 07:24, 11 September 2018
Themes:
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 displayed 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 a custom themes or specific enhancements.
Advanced Options
Advanced Options
Remote Theme:
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);
Enhancements:
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
- Use the full Preview tan to visualize the affects of enhancements. Such changes are not reflected in the Theme Preview.
Examples:
| 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' }
}
|
| Enable crosshairs on hover for x axis only. |
{
tooltip: { crosshairs:[true] }
}
|
| Enable crosshairs on hover for y axis only. |
{
tooltip: { crosshairs:[false, true] }
}
|
| Enable crosshairs on hover for both axes. |
{
tooltip: { crosshairs:[true,true] }
}
|
| Change y axis to logarithmic scale. |
{
yAxis: { type:'logarithmic' }
}
|
| Display y axis on opposite (right) side. |
{
yAxis: { opposite:true }
}
|
| 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'; } } }
}
|
| Force y axis labels to use 2 decimal points of precision. |
{
yAxis: { labels: { format:'{value:.2f}' } }
}
|
