Advanced Chart Formatting

This article provides an extensive list of advanced formatting commands for charts created on Lambda Analytics.

Adding Advanced Chart Formatting

1.  On the Advanced tab of the Chart Format window, click Add New Property.

2.  In the Property field, enter a command from the Property column of the table below.

3.  In the Value column, enter the necessary value as identified in the Value column of the table, and explained in the Description column of the table.

4.  To save the new formatting command, click the check button.

5.  To see the change in your chart with the window still open, click Apply.

To apply your change and close the window, click OK.

Property Value Description
chart.alignTicks true or false When using multiple axis, the ticks of two or more opposite axes with the least ticks. This can be prevented by setting alignTicks to false. If the grid lines look messy, it is a good idea to hide them for the secondary axis by setting gridLineWidth to 0. Defaults to true.
chart.backgroundColor "color"

Sets the background colour of the entire chart. The colour value may be a colour name (such as 'black') or a hexadecimal code enclosed in double quotes. 

Note:

  • Colour names and hex codes should not contain spaces
  • Hex codes should begin with #
  • If an unknown colour name or code is defined, a black background will be used instead.
chart.borderColor "color"

The colour of the outer chart border. Defaults to #4572A7

Note:

  • You must include chart.borderWidth
chart.borderRadius Value

The corner radius of the outer chart border. Defaults to 0. 

Note:

  • You must include chart.borderWidth
chart.borderWidth Value

The pixel width of the outer chart border.

Note:

  • You can include chart.borderColor to change the border colour.
chart.plotBackgroundColor "color"

Sets the background colour of the chart plot area. The colour value may be a colour name or a hexadecimal code enclosed in double quotes.

Note:

  • Colour names and hex codes should not contain spaces
  • Hex codes should begin with #
  • If an unknown colour name or code is defined, a black background will be used instead.
chart.height Value An explicit height for the chart. By default, the height is calculated from the offset height of the containing element, or 400 pixels if the containing element's height is 0. 
chart.ignoreHiddenSeries true or false If true, the axes will scale to the remaining visible series once one series is hidden. If false, hiding and showing a series will not affect the axes or the other series. For stacks, once one series within the stack is hidden, the rest of the stack will close in around it even if the axis is not affected.
chart.inverted true or false Whether to invert the axes so that the x axis 
chart.margin Array

The margin between the outer edge of the chart and the plot area. The numbers in the array designate top, right, bottom, and left respectively. Use the options marginTop, marginRight, marginBottom, and marginLeft for shorthand setting of one option.

The margin is 0 by default. The actual space is dynamically calculated from the offset of axis labels, axis title, subtitle, and legend in addition to the spacingTop, spacingRight, spacingBottom, and spacingLeft options. 

chart.marginBottom Value The margin between the bottom outer edge of the chart and the plot area. Use this to set a fixed pixel value for the margin as opposed to the default dynamic margin.
chart.marginLeft Value The margin between the left outer edge of the chart and the plot area. Use this to set a fixed pixel value for the margin as opposed to the default dynamic margin.
chart.marginRight Value The margin between the right outer edge of the chart and the plot area. Use this to set a fixed pixel value for the margin as opposed to the default dynamic margin.
chart.marginTop Value The margin between the top outer edge of the chart and the plot area. Use this to set a fixed pixel value for the margin as opposed to the default dynamic margin. 
chart.panKey String

Allows setting a key to switch between zooming and panning. 

chart.panning true or false Allow panning in a chart. Defaults to false. 
chart.plotBackgroundImage String The URL for an image to use as the plot background. To set an image as the background for the entire chart, set a CSS background image to the container element. Note that for the image to be applied to exported charts, its URL needs to be accessible by the server.
chart.plotBorderColor "color" The color of the inner chart or plot area border. Defaults to #C0C0C0.
chart.plotBorderWidth Value The pixel width of the plot area border. Defaults to 0. 
chart.polar true or false When true, cartesian charts like line, spline, area and column are transformed into the polar coordinate system. Requires highcharts-more.js. Defaults to false .
chart.reflow true or false Whether to reflow the chart to fit the width of the container when resizing the window. Defaults to true. 
chart.resetZoomButton.position.x
chart.resetZoomButton.position.y
Value Affects the position of the "Reset zoom" button. This is an object that can hold the properties align, verticalAlign, x and  y. 
chart.resetZoomButton.theme Object

A collection of attributes for the button. The object takes SVG attributes like  fill, stroke, stroke-width or r, the border radius. The theme also supports style, a collection of CSS properties for the text. Equivalent attributes for the hover state are given in theme.states.hover.

For example, define the property as follows: 

chart.resetZoomButton.theme.fill

Set value to:

"red"

chart.selectionMarkerFill "color" The background color of the marker square when selecting (zooming in on) an area of the chart. Defaults to RGBA (69, 114, 167, 0.25).
chart.showAxes true or false Whether to show the axes initially. This only applies to empty charts where series are added dynamically, as axes are automatically added to cartesian series. Defaults to false.
chart.spacing Array The distance between the outer edge of the chart and the content, like title, legend, axis title or labels. The numbers in the array designate top, right, bottom and left respectively. Use the options spacingTop, spacingRight, spacingBottom and spacingLeft options for shorthand setting of one option. Defaults to  [10, 10, 15, 10].
chart.style CSSObject

Additional CSS styles to apply inline to the container  div. Note that since the default font styles are applied in the renderer, it ignores the individual chart options and must be set globally.

chart.type

"waterfall", "gauge" or "solidgauge" 

The default series type for the chart. Use this to create a "waterfall" chart or a "gauge". 

Notes:

Drawing Gauges requires addtional formatting commands to create the desired appearance.

For example, a SolidGauge, uses the following properties:

  • chart.type with a value of "solidgauge"
  • pane.startAngle with a value of -90
  • pane.endAngle with a value of 90
  • pane.background.innerRadius with a value of "60%"
  • yAxis.min with a value of 0
  • yAxis.minorTickInterval with a value of null
  • yAxis.lineWidth with a value of 0
  • yAxis.tickWidth with a value of 0
  • plotOptions.solidgauge.dataLabels.borderWidth with a value of 0
  • pane.background.shape with a value of "arc"
  • yAxis.max with a value of 100000
  • plotOptions.solidgauge.dataLabels.y with a value of -40
  • colors with a value of ["skyblue"]
  • yAxis.labels.y  with a value of 12
  • yAxis.tickPixelInterval with a value of 10000
chart.width Value An explicit width for the chart. By default the width is calculated from the offset width of the containing element.
chart.zoomType "Value" Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy.
colors ["Color1", "Color2", "ColorN"']

A comma seperated list of color values for chart series data. The color value may be a color name (such as 'Blue', 'LightSeaGreen', 'Purple') or hexadecimal codes enclosed in double quotes.

Note:

  • Colour names and hex codes should not contain spaces
  • Hex codes should begin with #
  • If an unknown colour name or code is defined, a black series value is used.
legend.align "left", "right" or "center" Sets the left-to-right alignment of a chart legend.
legend.backgroundColor "color" The background color of the legend.
legend.borderColor color The color of the drawn border around the legend. Defaults to #909090.
legend.borderRadius Value The border corner radius of the legend. Defaults to 0. 
legend.borderWidth Value The width of the drawn border around the legend. Defaults to 0. 
legend.enabled true or false Enable or disable the legend. Defaults to true. 
legend.floating true or false When the legend is floating, the plot area ignores it and is allowed to be placed below it. Defaults to false. 
legend.itemDistance Value In a legend with horizontal layout, the itemDistance defines the pixel distance between each item. Defaults to 20.
legend.itemHiddenStyle.color CSSObject CSS styles for each legend item when the corresponding series or point is hidden. Only a subset of CSS is supported, notably those options related to text. Properties are inherited from style unless overridden here. Defaults to:<span style="font-size:12px;">itemHiddenStyle: { color: '#CCC'</span>. 
legend.itemHoverStyle.color CSSObject CSS styles for each legend item in hover mode. Only a subset of CSS is supported, notably those options related to text. Properties are inherited from style unless overridden here. Defaults to:<span style="font-size:12px;">itemHoverStyle: {color: '#000'}</span>. 
legend.itemMarginBottom Value The pixel bottom margin for each legend item. Defaults to 0.
legend.itemMarginTop Value The pixel top margin for each legend item. Defaults to 0. 
legend.itemStyle.color CSSObject
CSS styles for each legend item. Only a subset of CSS is supported, notably those options related to text. Defaults to { "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold" }.
legend.itemStyle.fontSize CSSObject

CSS styles for each legend item. Only a subset of CSS is supported, notably those options related to text. Defaults to { "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold" }. 

legend.itemStyle.fontWeight CSSObject

CSS styles for each legend item. Only a subset of CSS is supported, notably those options related to text. Defaults to { "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold" }. 

legend.itemWidth Value The width for each legend item. This is useful in a horizontal layout with many items when you want the items to align vertically.
legend.layout String The layout of the legend items. Can be one of "horizontal" or "vertical". Defaults to horizontal. 
legend.navigation.activeColor "color" The color for the active up or down arrow in the legend page navigation. Defaults to #3E576F.
legend.navigation.animation true or false How to animate the pages when navigating up or down. A value of true applies the default navigation given in the chart.animation option. Additional options can be given as an object containing values for easing and duration. Defaults to true. 
legend.navigation.arrowSize Value The pixel size of the up and down arrows in the legend paging navigation. Defaults to 12.
legend.navigation.inactiveColor "color" The color of the inactive up or down arrow in the legend page navigation. Defaults to #CCC. 
legend.navigation.style.fontWeight CSSObject Text styles for the legend page navigation. 
legend.padding Value The inner padding of the legend box. Defaults to 8.
legend.reversed true or false

Whether to reverse the order of the legend items compared to the order of the series or points as defined in the configuration object. Defaults to false. 

legend.rtl true or false Whether to show the symbol on the right side of the text rather than the left side. This is common in Arabic and Hebraic. Defaults to false.
legend.shadow true or false Object

Whether to apply a drop shadow to the legend. A backgroundColor also needs to be applied for this to take effect. Since 2.3 the shadow can be an object configuration containing color, offsetX, offsetY, opacity and width. Defaults to false. 

legend.symbolHeight Value The pixel height of the symbol for series types that use a rectangle in the legend. Defaults to the font size of legend items. 
 legend.symbolPadding Value The pixel padding between the legend item symbol and the legend item text. Defaults to 5.
 legend.symbolRadius Value The border radius of the symbol for series types that use a rectangle in the legend. Defaults to 0.
 legend.symbolWidth Value The pixel width of the legend item symbol. Defaults to 16.
 legend.title.style.fontSize CSSObject Generic CSS styles for the legend title. Defaults to {"fontWeight":"bold"}.
 legend.useHTML true or false Whether to use HTML to render the legend item texts.
 legend.verticalAlign "top", "bottom" or"center" Sets the top-to-bottom alignment of a chart legend.
 legend.width Value The width of the legend box.
 legend.backgroundColor "color"

Sets the background color of the chart legend.

Note:

  • Colour names and hex codes should not contain spaces
  • Hex codes should begin with #
  • If an unknown colour name or code is defined, a black background will be used instead.
 legend.title.text String Displays a legend tile.
 legend.x Value The x offset of the legend relative to its horizontal alignment align within chart.spacingLeft and chart.spacingRight. Negative x moves it to the left, positive x moves it to the right. Defaults to 0.
legend.y Value The vertical offset of the legend relative to it's vertical alignment verticalAlignwithin chart.spacingTop and chart.spacingBottom. Negative y moves it up, positive y moves it down. Defaults to 0. 
pane.background.backgroundColor "color"  
pane.background.shape String  
 pane.background.innerWidth Value  
pane.background.outerWidth Value  
pane.background.borderWidth Value  
pane.background.borderColor "color"  
plotOptions.pie.innerSize "Value" Sets the size of a hole in Pie Charts. Value can either be a pixel number or % of Pie enclosed in double quotes.
 plotOptions.series.dataLabels.enabled true or false Displays data values on a chart
plotOPtions.series.dataLabels.format {format string}

Applies formatting to data labels. For example:

{point.y:.2f} causes data values to display with two decimals

{point.y:,.0f} causes data values to display with the thousands separator chart.

Note:

  • Requires the plotOptions.series.dataLabels.enabled format property to be set.
plotOptions.series.dataLabels.rotation Value

Rotates data labels from 0 to 360 degrees.

Note:

  • Requires the plotOptions.series.dataLabels.enabled format property to be set

plotOptions.series.dataLabels.x

plotOptions.series.dataLabels.y

Value  
series.shadow true or false Whether to apply a drop shadow to the graph line. This shadow can be an object configuration containing colour, offsetX, offsetY, opacity, and width. Defaults to false.
series.borderWidth Value  
series.groupPadding Value  
series.pointPadding Value  

subtitle.text

title.text

String

Displays a chart title or subtitle text string. For example, the title and subtitle values of :

Fresh Food Sales Performance

State Tree Map by Demographic

title.text "Value" The title of the chart. To disable the title, set the text to null. Defaults to chart title. 
tootltip.followPointer true or false

Whether the tooltip should follow the mouse as it moves across columns, pie slices, and other point types with an extent. By default, it behaves this way for scatter, bubble, and pie series bby override in the plotOptions for those series types. Defaults to false.

For touch moves to behave the same way, followTouchMove must also be true. 

tooltip.footerFormat "Value" A string to append to the tooltip format. Defaults to false.
tooltip.headerFormat "Value"

The HTML of the tooltip header line. Variables are enclosed by curly brackets. Available variables are point.key, series.name, series.color and other members from the point and series objects. The point.key variable contains the category name, x value or datetime string depending on the type of axis. For datetime axes, the point.key date format can be set using tooltip.xDateFormat.

Defaults to <span style="font-size: 10px">{point.key}</span><br/>.

tooltip.pointFormat "Value"

The HTML of the point's line in the tooltip. Variables are enclosed by curly brackets. Available variables are point.x, point.y, sries.name and series.color and other properties on the same form. Furthermore, point.y can be extended by the tooltip.valuePrefix and tooltip.valueSuffix variables. This can also be overriden for each series, which makes it a good hook for displaying units. 

Defaults to <span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>

tooltip.useHTML true or false Use HTML to render the contents of the tooltip instead of SVG. Using HTML allows advanced formatting like tables and images in the tooltip. It is also recommended for rtl languages as it works around rtl bugs in early Firefox. Defaults to false. 
xAxis.alternateGridColor Value When using an alternate grid colour, a band is painted across the plot area between every other grid line. 
xAxis.gridLineWidth Value The width of the grid lines extending the ticks across the plot area. Defaults to 0. 
xAxis.labels.enabled true or false Enable or disable the axis labels. Defaults to true.
xAxis.tickWidth Value The pixel width of the major tick marks. Defaults to 1. 
xAxis.title.margin Value The pixel distance between the axis labels or line and the title. Defaults to 0.
xAxis.title.style.fontSize "Value"  
xAxis.title.style.letterSpacing "Value"  
xAxis.title.text Value The actual text of the axis title. It can contain basic HTML text markup like <b>, <i> and spans with style.
xAxis.type Value The type of axis. Can be one of "linear," "logarithmic," "datetime," or "category." In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days. In a category axis, the point names of the chart's series are used for categories. If not, a categories array is defined. Defaults to linear. 

yAxis.alternateGridColor

xAxis.alternateGridColor

"color"

Sets alternating bands of grid colours along either the x-axis or y-axis of the chart plot area. The colour value may be a colour name (such as 'black') or a hexadecimal code enclosed in double quotes. 

Note:

  • Colour names and hex codes should not contain spaces.
  • Hex codes should begin with #.
  • If an unknown colour name or code is defined, a black series value is returned.

 yAxis.gridLineWidth

xAxis.gridLineWidth

Value Sets the width of chart axis gridlines in pixels.
yAxis.labels.distance Value Angular gauges and solid gauges only. The label's pixel distance from the perimtere of the plot area. Defaults to 15.
yAxis.labels.rotation Value Rotation of the labels in degrees. Defaults to 0.
yAxis.labels.style.fontSize CSSObject CSS styles for the label. Use whiteSpace: 'nowrap' to prevent wrapping of category labels. Use textOverflow:
yAxis.min Value

The minimum value of the axis. If null, the min value is automatically calculated. If the startOnTick option is true, the min value might be rounded down. 

The automatically calculated minimum value is also affected by floor, minPadding, minRange as well as series.threshold and series.softThreshold. 

yAxis.max Value The maximum value of the axis. If null, the max value is automatically calculated. If the endOnTick option is true, the max value might be rounded up. The actual maximum value is also influenced by chart.alignTicks. 
 yAxis.minorTickPosition String The position of the minor tick marks relative to the axis line. Can be one of inside and outside. Defaults to "outside."
yAxis.tickPosition String The position of the major tick marks relative to the axis line. Can be one of inside and outside. Defaults to outside.
yAxis.title.margin Value The pixel distance between the axis labels and the title. Positive values are outside the axis line, negative are inside. Defaults to 40.
yAxis.title.margin Value The pixel distance between the axis labels and the title. Positive values are outside the axis line, negative are inside. Defaults to 40. 
yAxis.title.style.fontSize "Value" CSS styles for the title. When titles are rotated they are rendered using vector graphic techniques are not all styles are applicable. Defaults to { "color": "#707070", "fontWeight": "bold" }. 
yAxis.title.text Value The actual text of the axis title. Horizontal texts can contain HTML, but rotated texts are painted using vector techniques and must be clean text. The Y axis title is disabled by setting the text option to null. Defaults to Values.

yAxis.type

xAxis.type

"logarithmic", "datetime", "category"

"logarithmic" or "datetime"

The type of axis. Can be one of "linear", "logarithmic", "datetime", or "category." In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days. In a category axis, the point names of the chart's series are used for categories, if not a category array is defined.