Difference between revisions of "Widget Editor Theme Tab"

From dataZoa Wiki
Jump to: navigation, search
m
(→‎Tooltip Examples:)
 
(52 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
=== Themes: ===
 
=== Themes: ===
 
<div style="margin: 2em; margin-left: 6em;">
 
<div style="margin: 2em; margin-left: 6em;">
−
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 <i>Theme Preview</i> to the right.
+
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 effects visible in the <i>Theme Preview</i> to the right.
 
<br><div class="imgGlyph24 imgIdea"></div> The <i>Theme Preview</i> 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.
 
<br><div class="imgGlyph24 imgIdea"></div> The <i>Theme Preview</i> 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.
 
</div>
 
</div>
  
−
 
+
===<div class="Gdib DZGrayButRnd"><div class="imgWholeWrap1" style="margin-right:.5em;"><div class="imgWhole" data-guts="{url:'/img/Up-Down.png', title:'Advanced Options', xtraStyle:'height:16px;width:16px;'}"></div></div>Advanced Options</div>===
−
===<div class="Gdib DZGrayButRnd"><div class="imgWholeWrap1"><div class="imgWhole" data-guts="{url:'/img/Up-Down.png', title:'Advanced Options', xtraStyle:'height:16px;width:16px;'}"></div></div>&nbsp; Advanced Options</div>===
+
  
 
==== Remote Theme: ====
 
==== Remote Theme: ====
 
<div style="margin: 2em; margin-left: 6em;">
 
<div style="margin: 2em; margin-left: 6em;">
−
Optionally bypass all the preconfigured themes by linking to a custom remote theme file.
+
Optionally bypass all the preconfigured themes by linking to a custom remote theme file.  A <i>remote theme</i> is a resource from outside of dataZoa, typically reflecting particular branding and behavior options used throughout your organization for consistent look and feel.
 
* Using https is required to ensure proper loading of themes
 
* Using https is required to ensure proper loading of themes
 
* Themes are JavaScript files which set and apply Highchart options
 
* Themes are JavaScript files which set and apply Highchart options
Line 25: Line 24:
 
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 [[Format Widget enhancements as a JavaScript object literal|JavaScript object literal]] which will be applied after the theme and a handful of preset dataZoa options for full flexibility.
 
* Enhancements must be entered as a valid [[Format Widget enhancements as a JavaScript object literal|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... [https://api.highcharts.com/highcharts/ Highcharts Options Reference]
+
* Only options and properties recognized by Highcharts will have an effect... [https://api.highcharts.com/highcharts/ Highcharts Options Reference]
−
* Widgets are loaded with Highcharts v6.0.4 and the following modules: <i>Data, 3D, Boost, More and Exporting</i>
+
* Widgets automatically load Highcharts v6.0.4 and the following modules: <i>Data, 3D, Boost, More and Exporting</i>
−
* <div class="imgGlyph24 imgNote"></div> Use the full <b>Preview</b> tab 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> tab to visualize the effects of enhancements. Such changes are <i>not</i> reflected in the <i>Theme Preview</i>.
 
</div>
 
</div>
  
−
==== Examples: ====
+
 
−
<div style="margin: 2em; margin-left: 6em;">
+
===== Title Examples: =====
−
<table class="Gbb1" style="width:100%;">
+
<div style="margin:2em; margin-left:6em;">
−
  <tr><td style="width:40%;">Description or enhancement</td><td style="width:60%;">Code for enhancement</td></tr>
+
<table class="Gbb1" style="width:100%;font-size:smaller;">
−
<tr><td>Move legend to right of chart (particularly useful for pie type displays).</td>
+
  <tr>
−
  <td>
+
  <td style="width:35%;font-size:larger;"><b>Description of enhancement</b></td>
−
<nowiki>{
+
  <td style="width:65%;font-size:larger;"><b>Code for enhancement</b></td>
−
  legend: { layout:'vertical', align:'right', verticalAlign:'middle' }
+
−
}</nowiki>
+
−
  </td>
+
 
  </tr>
 
  </tr>
−
  <tr><td>Prevent a series from being removed when clicking it within the legend (for non-pie type displays).</td>
+
  <tr><td>Set title styling: font, size, weight and color.</td>
 
   <td>
 
   <td>
 
  <nowiki>{
 
  <nowiki>{
−
   plotOptions: { series: { events: { legendItemClick:function () { return false; } } } }
+
   title: { style: { fontFamily:'Times New Roman', fontSize:'21px', fontWeight:'bold', color:'#0000FF' } }
 
}</nowiki>
 
}</nowiki>
 
   </td>
 
   </td>
 
  </tr>
 
  </tr>
−
  <tr><td>Prevent a series from being removed when clicking it within the legend (for pie type displays).</td>
+
  <tr><td>Add a subtitle.</td>
 
   <td>
 
   <td>
 
  <nowiki>{
 
  <nowiki>{
−
   plotOptions: { pie: { point: { events: { legendItemClick:function () { return false; } } } } }
+
   subtitle: { text:'This is just the beginning', style:{ color:'#777777;' } }
 
}</nowiki>
 
}</nowiki>
 
   </td>
 
   </td>
 +
</tr>
 +
</table>
 +
</div>
 +
 +
===== Tooltip Examples: =====
 +
<div style="margin:2em; margin-left:6em;">
 +
<table class="Gbb1" style="width:100%;font-size:smaller;">
 +
<tr>
 +
  <td style="width:35%;font-size:larger;"><b>Description of enhancement</b></td>
 +
  <td style="width:65%;font-size:larger;"><b>Code for enhancement</b></td>
 
  </tr>
 
  </tr>
 
  <tr><td>Enable crosshairs on hover for: <i>[x-axis, y-axis]</i></td>
 
  <tr><td>Enable crosshairs on hover for: <i>[x-axis, y-axis]</i></td>
Line 62: Line 68:
 
   </td>
 
   </td>
 
  </tr>
 
  </tr>
−
  <tr><td>Set tooltip prefix, suffix, decimals and date format (<i>%b = Month abbreviation, %m = Month number, %d = Day number %y = 2 digit year, %Y = 4 digit year</i>).</td>
+
  <tr><td>Set tooltip prefix, suffix, decimals and date format (<i>%B= Month full name, %b = Month abbreviation, %m = Month number, %d = Day number, %Y = 4 digit year, %y = 2 digit year</i>).</td>
 
   <td>
 
   <td>
 
  <nowiki>{
 
  <nowiki>{
Line 76: Line 82:
 
   </td>
 
   </td>
 
  </tr>
 
  </tr>
−
  <tr><td>Separate tooltips foe each series displayed simultaneously.</td>
+
  <tr><td>Separate tooltips for each series displayed simultaneously.</td>
 
   <td>
 
   <td>
 
  <nowiki>{
 
  <nowiki>{
Line 83: Line 89:
 
   </td>
 
   </td>
 
  </tr>
 
  </tr>
−
  <tr><td>Point markers displayed only while hovering.</td>
+
  <tr><td>Offset start day of week for tooltip date display in Weekly Series.<br><br>Note:  Yes, this <b>is</b> an xAxis setting, required by HighCharts but used as a hint by dataZoa<br>Note: By default, 0 == Sunday</td>
 
   <td>
 
   <td>
 
  <nowiki>{
 
  <nowiki>{
−
   plotOptions: { series: { marker: { enabled:false, states: { hover: { enabled:true } } } } }
+
   xAxis: { startOfWeek: 4 }
 
}</nowiki>
 
}</nowiki>
 
   </td>
 
   </td>
 
  </tr>
 
  </tr>
−
  <tr><td>Point markers displayed larger on hover (doesn't force point markers with lots of data).</td>
+
</table>
 +
</div>
 +
 
 +
===== Legend Examples: =====
 +
<div style="margin:2em; margin-left:6em;">
 +
<table class="Gbb1" style="width:100%;font-size:smaller;">
 +
  <tr>
 +
  <td style="width:35%;font-size:larger;"><b>Description of enhancement</b></td>
 +
  <td style="width:65%;font-size:larger;"><b>Code for enhancement</b></td>
 +
</tr>
 +
<tr><td>Move the legend to the right of the chart (particularly useful for pie type displays).</td>
 
   <td>
 
   <td>
 
  <nowiki>{
 
  <nowiki>{
−
   plotOptions: { series: { marker: { radius:3.5, states: { hover: { radius:7 } } } } }
+
  legend: { layout:'vertical', align:'right', verticalAlign:'middle' }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Add some styling to legend items.</td>
 +
  <td>
 +
<nowiki>{
 +
  legend: { itemStyle:{ fontFamily:'Helvetica', fontWeight:'bold' } }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Add a styled title to the legend.</td>
 +
  <td>
 +
<nowiki>{
 +
  legend: { title:{ text:'I am Legend', style:{ fontSize:'1.5em', textDecoration:'underline' } } }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Prevent a series from being removed when clicking it within the legend (for non-pie type displays).</td>
 +
  <td>
 +
<nowiki>{
 +
   plotOptions: { series: { events: { legendItemClick:function () { return false; } } } }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Prevent a series from being removed when clicking it within the legend (for pie type displays).</td>
 +
  <td>
 +
<nowiki>{
 +
  plotOptions: { pie: { point: { events: { legendItemClick:function () { return false; } } } } }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
</table>
 +
</div>
 +
 
 +
===== Y-Axis Examples: =====
 +
<div style="margin:2em; margin-left:6em;">
 +
<table class="Gbb1" style="width:100%;font-size:smaller;">
 +
<tr>
 +
  <td style="width:35%;font-size:larger;"><b>Description of enhancement</b></td>
 +
  <td style="width:65%;font-size:larger;"><b>Code for enhancement</b></td>
 +
</tr>
 +
<tr><td>'''Multiple Axes:''' Enable a 2nd y-axis on the right and display the 4th series there (axes are indexed starting at 0 instead of 1).  Note: Additional y-axes are allowed and all of the following settings can be applied to any of them.</td>
 +
  <td>
 +
<nowiki>{
 +
  yAxis: [{ title:{ text:'Left yAxis' } }, { title:{ text:'Right yAxis' }, opposite:true }],
 +
  series: [{}, {}, {}, { yAxis:1 }]
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Set a custom range for the y-axis.</td>
 +
  <td>
 +
<nowiki>{
 +
  yAxis: { min:100, max:420 }
 
}</nowiki>
 
}</nowiki>
 
   </td>
 
   </td>
Line 129: Line 198:
 
  <nowiki>{
 
  <nowiki>{
 
   yAxis: { labels: { formatter:function(){ return '$'+this.axis.defaultLabelFormatter.call(this)+' USD'; } } }
 
   yAxis: { labels: { formatter:function(){ return '$'+this.axis.defaultLabelFormatter.call(this)+' USD'; } } }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Set dash style of grid lines (options include: Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot).</td>
 +
  <td>
 +
<nowiki>{
 +
  yAxis: { gridLineDashStyle:'LongDashDot' }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Paint horizontal bands of color between every other grid line.</td>
 +
  <td>
 +
<nowiki>{
 +
  yAxis: { alternateGridColor:'#F0F0F0' }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
</table>
 +
</div>
 +
 +
===== X-Axis Examples: =====
 +
<div style="margin:2em; margin-left:6em;">
 +
<table class="Gbb1" style="width:100%;font-size:smaller;">
 +
<tr>
 +
  <td style="width:35%;font-size:larger;"><b>Description of enhancement</b></td>
 +
  <td style="width:65%;font-size:larger;"><b>Code for enhancement</b></td>
 +
</tr>
 +
<tr><td>Show vertical grid lines.</td>
 +
  <td>
 +
<nowiki>{
 +
  xAxis: { startOnTick:true, endOnTick:true, gridLineWidth:1 }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Forcibly rotate x-axis labels (enter a rotation angle in degrees).</td>
 +
  <td>
 +
<nowiki>{
 +
  xAxis: { labels: { rotation:-45 } }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Place a vertical line at a given date (months are 0 based thus the date in this example is June 1st, 2017).</td>
 +
  <td>
 +
<nowiki>{
 +
  xAxis: { plotLines:[{ color:'#FF0000', width:2, value:Date.UTC(2017, 5, 1) }] }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Highlight a given date range (months are 0 based thus the dates in this example are July 1st, 2017 - September 30th, 2017).</td>
 +
  <td>
 +
<nowiki>{
 +
  xAxis: { plotBands:[{ color:'#FCFFC5', from:Date.UTC(2017, 6, 1), to:Date.UTC(2017, 8, 30) }] }
 
}</nowiki>
 
}</nowiki>
 
   </td>
 
   </td>
Line 136: Line 257:
 
  <nowiki>{
 
  <nowiki>{
 
   xAxis: { visible:false }
 
   xAxis: { visible:false }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Force Quarterly x-axis.</td>
 +
  <td>
 +
<nowiki>{
 +
xAxis: {
 +
  tickInterval: (60 * 60 * 24 * 30 * 1000 * 3), // ticks (in millisecs) on quarterly bounds (roughly)
 +
  labels: {
 +
    formatter: function() {
 +
      var Qn = Math.ceil((new Date(this.value).getMonth() + 1 ) / 3 );
 +
      return Highcharts.dateFormat('Q' + Qn + ' %Y' , this.value);
 +
      }
 +
    }
 +
  }
 
}</nowiki>
 
}</nowiki>
 
   </td>
 
   </td>
Line 141: Line 277:
 
</table>
 
</table>
 
</div>
 
</div>
 +
 +
===== Miscellaneous Examples: =====
 +
<div style="margin:2em; margin-left:6em;">
 +
<table class="Gbb1" style="width:100%;font-size:smaller;">
 +
<tr>
 +
  <td style="width:35%;font-size:larger;"><b>Description of enhancement</b></td>
 +
  <td style="width:65%;font-size:larger;"><b>Code for enhancement</b></td>
 +
</tr>
 +
<tr><td>'''Varying Series Styles:''' Change 2nd series a to dotted line and 3rd series columns (particularly useful for combining different dash styles and line/column charts).</td>
 +
  <td>
 +
<nowiki>{
 +
  series: [{}, { dashStyle:'shortdot' }, { type:'column' }]
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Allow users to zoom display in the given dimension by dragging the mouse (valid dimemsions include: x, y or xy).</td>
 +
  <td>
 +
<nowiki>{
 +
  chart: { zoomType: 'x' }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Set a list of colors used for the display's series. When all colors are used new colors will be pulled from the start again.</td>
 +
  <td>
 +
<nowiki>{
 +
  colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Style the display's border (setting borderWidth to 0 hides the border).</td>
 +
  <td>
 +
<nowiki>{
 +
  chart: { borderWidth:2, borderRadius:6, borderColor:'#666666' }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Point markers displayed only while hovering.</td>
 +
  <td>
 +
<nowiki>{
 +
  plotOptions: { series: { marker: { enabled:false, states: { hover: { enabled:true } } } } }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Point markers displayed larger on hover (doesn't force point markers with lots of data).</td>
 +
  <td>
 +
<nowiki>{
 +
  plotOptions: { series: { marker: { radius:3.5, states: { hover: { radius:7 } } } } }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Display labels showing stack totals when normal value stacking is enabled (best suited to column or bar displays).</td>
 +
  <td>
 +
<nowiki>{
 +
  yAxis: { stackLabels: { enabled:true } }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Set abbreviations used to shorten large numbers in y-axis labels (symbols set as null causes full numbers to be shown).</td>
 +
  <td>
 +
<nowiki>{
 +
  chart: { events: { load:function(){ Highcharts.setOptions({ lang: { numericSymbols:['Tho', 'Mil', 'Bil', 'Tri', 'Qud', 'Qun'] } }); this.redraw(); } } }
 +
}</nowiki>
 +
  </td>
 +
</tr>
 +
<tr><td>Explicitly set the colors of two Series, the Plot area background, and the Axis area background.</td>
 +
  <td>
 +
<nowiki>
 +
{
 +
  colors: ['red', 'blue'],
 +
  chart: {
 +
      backgroundColor: '#dddddd',
 +
      plotBackgroundColor: '#eeeeee'
 +
  }
 +
}
 +
</nowiki>
 +
  </td>
 +
</tr>
 +
</table>
 +
</div>
 +
 +
[[Category:Advanced]][[Category:Displays]][[Category:Editing]][[Category:Examples]][[Category:How_To]]

Latest revision as of 13:01, 1 April 2020

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 effects 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.

Advanced Options

Remote Theme:

Optionally bypass all the preconfigured themes by linking to a custom remote theme file. A remote theme is a resource from outside of dataZoa, typically reflecting particular branding and behavior options used throughout your organization for consistent look and feel.

  • 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.

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


Title Examples:
Description of enhancement Code for enhancement
Set title styling: font, size, weight and color. 
{
   title: { style: { fontFamily:'Times New Roman', fontSize:'21px', fontWeight:'bold', color:'#0000FF' } }
}
Add a subtitle. 
{
   subtitle: { text:'This is just the beginning', style:{ color:'#777777;' } }
}
Tooltip Examples:
Description of 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 = 4 digit year, %y = 2 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 for each series displayed simultaneously. 
{
   tooltip: { split:true }
}
Offset start day of week for tooltip date display in Weekly Series.

Note: Yes, this is an xAxis setting, required by HighCharts but used as a hint by dataZoa
Note: By default, 0 == Sunday		 
{
   xAxis: { startOfWeek: 4 }
}
Legend Examples:
Description of enhancement Code for enhancement
Move the legend to the right of the chart (particularly useful for pie type displays). 
{
   legend: { layout:'vertical', align:'right', verticalAlign:'middle' }
}
Add some styling to legend items. 
{
   legend: { itemStyle:{ fontFamily:'Helvetica', fontWeight:'bold' } }
}
Add a styled title to the legend. 
{
   legend: { title:{ text:'I am Legend', style:{ fontSize:'1.5em', textDecoration:'underline' } } }
}
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; } } } } }
}
Y-Axis Examples:
Description of enhancement Code for enhancement
Multiple Axes: Enable a 2nd y-axis on the right and display the 4th series there (axes are indexed starting at 0 instead of 1). Note: Additional y-axes are allowed and all of the following settings can be applied to any of them. 
{
   yAxis: [{ title:{ text:'Left yAxis' } }, { title:{ text:'Right yAxis' }, opposite:true }],
   series: [{}, {}, {}, { yAxis:1 }]
}
Set a custom range for the y-axis. 
{
   yAxis: { min:100, max:420 }
}
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'; } } }
}
Set dash style of grid lines (options include: Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot). 
{
   yAxis: { gridLineDashStyle:'LongDashDot' }
}
Paint horizontal bands of color between every other grid line. 
{
   yAxis: { alternateGridColor:'#F0F0F0' }
}
X-Axis Examples:
Description of enhancement Code for enhancement
Show vertical grid lines. 
{
   xAxis: { startOnTick:true, endOnTick:true, gridLineWidth:1 }
}
Forcibly rotate x-axis labels (enter a rotation angle in degrees). 
{
   xAxis: { labels: { rotation:-45 } }
}
Place a vertical line at a given date (months are 0 based thus the date in this example is June 1st, 2017). 
{
   xAxis: { plotLines:[{ color:'#FF0000', width:2, value:Date.UTC(2017, 5, 1) }] }
}
Highlight a given date range (months are 0 based thus the dates in this example are July 1st, 2017 - September 30th, 2017). 
{
   xAxis: { plotBands:[{ color:'#FCFFC5', from:Date.UTC(2017, 6, 1), to:Date.UTC(2017, 8, 30) }] }
}
Hide the x-axis. 
{
   xAxis: { visible:false }
}
Force Quarterly x-axis. 
{
xAxis: { 
  tickInterval: (60 * 60 * 24 * 30 * 1000 * 3), // ticks (in millisecs) on quarterly bounds (roughly)
  labels: {
    formatter: function() {
      var Qn = Math.ceil((new Date(this.value).getMonth() + 1 ) / 3 );
      return Highcharts.dateFormat('Q' + Qn + ' %Y' , this.value);
      }
    }
  }
}
Miscellaneous Examples:
Description of enhancement Code for enhancement
Varying Series Styles: Change 2nd series a to dotted line and 3rd series columns (particularly useful for combining different dash styles and line/column charts). 
{
   series: [{}, { dashStyle:'shortdot' }, { type:'column' }]
}
Allow users to zoom display in the given dimension by dragging the mouse (valid dimemsions include: x, y or xy). 
{
   chart: { zoomType: 'x' }
}
Set a list of colors used for the display's series. When all colors are used new colors will be pulled from the start again. 
{
   colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']
}
Style the display's border (setting borderWidth to 0 hides the border). 
{
   chart: { borderWidth:2, borderRadius:6, borderColor:'#666666' }
}
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 } } } } }
}
Display labels showing stack totals when normal value stacking is enabled (best suited to column or bar displays). 
{
   yAxis: { stackLabels: { enabled:true } }
}
Set abbreviations used to shorten large numbers in y-axis labels (symbols set as null causes full numbers to be shown). 
{
   chart: { events: { load:function(){ Highcharts.setOptions({ lang: { numericSymbols:['Tho', 'Mil', 'Bil', 'Tri', 'Qud', 'Qun'] } }); this.redraw(); } } }
}
Explicitly set the colors of two Series, the Plot area background, and the Axis area background. 
{
   colors: ['red', 'blue'],
   chart: {
      backgroundColor: '#dddddd',
      plotBackgroundColor: '#eeeeee'
   }
}
Retrieved from "https://docwiki.datazoa.com/index.php?title=Widget_Editor_Theme_Tab&oldid=4309"