Gauges, ranges and polar charts in Beta

Note: Since August 27, 2012 Highcharts 2.3 is no longer in Beta. See the release article.

We're excited to announce Highcharts 2.3 Beta, which mainly includes polar charts, angular gauges and range series as well as radial gradients for pies. To avoid bloating the Highcharts core JavaScript, we deploy the new chart types and features in a separate file called highcharts-more.js. We will continue to build extended functionality in this file, and reserve highcharts.js for common tasks and visualizations.

More importantly, the new features will be released under the existing Highcharts license. If you purchased a license within the last year, you may upgrade for free and start using the new charts immediately. If your license is older than that, you may purchase a maintenance license from our webshop.

Download

The 2.3 Beta is released as separate, downloadable files:

Article table of contents

Polar charts

We took great care to reuse existing options and patterns when designing the option set of polar charts. The result is one single switch to turn a regular X-Y chart into a polar chart. Add the chart.polar option, and the X axis is wrapped around the perimeter while the Y axis extends from the center to the top. Every aspect of the chart anatomy, including series types like lines, areas, splines and columns as well as features like plot bands, data labels, tooltips, click events, stacking and axis setup, are transformed to the polar coordinate system.

New options related to polar charts

chart.polar When true, cartesian charts are transformed into the polar coordinate system.
pane This configuration object holds general options for the combined X and Y axes set. Each xAxis or yAxis can reference the pane by index.
pane.background An object, or array of objects, for backgrounds. Sub options include backgroundColor (which can be solid or gradient), innerWidth, outerWidth, borderWidth, borderColor.
pane.center The center of the polar chart, given as an array of [x, y] positions. Positions can be given as integers that transform to pixels, or as percentages of the plot area size. Defaults to ['50%', '50%']
pane.endAngle The end angle of the polar X axis, given in degrees where 0 is north. Defaults to startAngle + 360.
pane.startAngle The start angle of the polar X axis, given in degrees where 0 is north. Defaults to 0.
plotOptions.series.pointPlacement This option applies to cartesian charts as well. In a column chart, when the pointPlacement is "on", the point will not create any padding of the X axis, and thus the first column will point directly north in a polar chart. If the pointPlacement is "between", the columns will be laid out between ticks. This is useful for example for visualising an amount between two points in time or in a certain sector of a polar chart.

Polar chart examples

Angular gauges

Angular gauges are also known as dials or speedometer-like widgets, and provide a great visualisation for dashboards. Like with polar charts, we extended the already existing series/points/axis model, and implemented the gauges as a new series type with one value axis, the yAxis. Which means that everything you learned about working dynamically and statically with other Highcharts series types, also apply to the angular gauges. Normally there is only one point in a gauge series, but it also handles multiple point, like in our clock example with three dials. You can add as many background elements as you like to the gauge, allowing you to style it all the way from the minimal default design to heavy, 3D like works of art with shadows and reflections created with linear and radial gradients.

New or altered options related to gauges

pane See the table above for details of pane and its child properties, including backgrounds for the gauge.
plotOptions.gauge The new series type is called "gauge".
plotOptions.gauge.dataLabels For gauges, the dataLabels are enabled by default and shown in a bordered box below the pivot.
plotOptions.gauge.dial The "dial" configuration object holds the setup for the pointer of the gauge. Available sub-options are "backgroundColor", "baseLength", "baseWidth", "borderColor", "borderWidth", "radius" and "rearLength".
plotOptions.gauge.pivot The "pivot" configuration object holds the setup for the center of rotation of the gauge. Available sub-options are "backgroundColor", "borderColor", "borderWidth" and "radius".

Gauge examples

Range series

Highcharts now includes range series in different flavours, namely "arearange", "areasplinerange" and "columnrange". Instead of cluttering up the API with a "barrange" series type, we let you achieve this by setting chart.inverted to true with a column range series. Data points for range series can be defined either as objects ({ x: 0, low: 1, high: 9 }) or as arrays ([0, 1, 9]). In either case, the x value can be skipped.

New or altered options related to ranges

dataLabels Since both the low values and high values for a series need a separate data label, we added a new set of options, "xLow", "xHigh", "yLow" and "yHigh". With these options, the relative position can be altered.

Range series examples

Radial gradients

Another new feature of the 2.4 Beta is radial gradients, which falls into the eye candy category. Countless times we have been asked whether it is possible to fill our pie charts with a radial gradient to apply a 3D-like feel. We've answered that it should be possible with SVG, but unsupported in VML. After all, according to netmarketshare.com, 34% of Internet users are still on a VML powered browser. So we really set out to solve this problem, and eventually found a way to display a circular gradient in legacy IE by loading a pattern image. The bad news are that you need to load another file from our CDN or your web server. The good news are it works. And you can always choose to let legacy IE show the solid color fill.

Author:
Torstein Hønsi
CTO and founder of Highsoft Solutions