In this chapter, we will learn about chart types that are different from the commonly used ones and use different configuration options. These include angular gauge, solid gauge, VU meter, waterfall chart, pyramid chart, funnel chart, and finally, a heat map. To be specific, we will cover the following topics:
- Creating and configuring an angular gauge
- Plot a solid gauge chart
- Create a VU meter
- Plotting and funneling pyramid charts
- Drawing a heat map—a new chart type introduced in Highcharts 4
Angular gauge charts are also known as speedometers and dials. They are great to use on dashboards, especially when the plotted data is being fetched in real time. These charts don't contain the x axis, but instead, they contain only one value axis, that is, the y axis. Anything provided for the x axis will not be drawn on the chart.
In the following example, we will plot a simple angular gauge chart to take a look at the configuration options it offers:
$( '#chart_container' ).highcharts({
chart: {
type: 'gauge'
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150
},
yAxis: {
title: {
text: 'km/h'
},
min: 0,
max: 200
},
series: [{
name: 'Speed',
data: [120]
}]
});Nothing much is going on here as we declared the chart type to be gauge. Then, for the pane component, we defined its start and end angles at -150 and 150, respectively. This will create a simple gauge chart as follows:
You can find more about the pane component by visiting the official documentation at http://api.highcharts.com/highcharts#pane.
In the previous example, we created an angular gauge with a single axis, but we can also create an angular gauge with multiple axes. The yAxis component accepts an array to define multiple axes. Each axis can have its own configuration options and styling, as shown in the following code:
yAxis: [{
min: 0,
max: 200,
offset: -40,
labels: {
style: {
color: '#2085e6'
}
},
lineColor: '#2085e6',
lineWidth: 3,
tickColor: '#2085e6',
tickWidth: 3,
minorTickColor: '#2085e6',
minorTickWidth: 1
}, {
min: 0,
max: 124,
tickPosition: 'outside',
minorTickPosition: 'outside',
offset: -30,
labels: {
style: {
color: '#e63820'
},
distance: 20
},
lineColor: '#e63820',
lineWidth: 3,
tickColor: '#e63820',
tickWidth: 3,
minorTickColor: '#e63820',
minorTickWidth: 1
}]The preceding code will give the following result:
When introducing dual axes, it's important to calculate the unit difference in both axes, hence defining the max and min values accordingly. For instance, in the preceding example that shows the speed in kmph and mph, we know that 1 km is equal to 0.621 miles; hence, for the max value of 200 km on one axis, the corresponding max value on the other axis is set to be 124 miles.
In addition to the modified yAxis, the chart.alignTicks property has also been set to false to prevent Highcharts from aligning the ticks of both the axes, hence resulting in the max value for one of the axes being ignored.
As with all the charts offered by Highcharts, the angular gauge chart can be customized heavily to incorporate the branding of an application or a website. We have taken a look at how to modify various styling options for each axis in the previous example. We will take it a bit further in the following example to give the speedometer a more fancy look.
We will begin by customizing the look of the axes. To do so, we will modify various properties, including labels, lineColor, lineWidth, and tickColor. The following code will modify both the axes:
yAxis: [{
min: 0,
max: 220,
offset: -110,
labels: {
style: {
color: '#fff'
}
},
lineColor: '#e63820',
lineWidth: 0,
tickColor: '#e63820',
tickWidth: 3,
tickLength: 12,
minorTickColor: '#e63820',
minorTickWidth: 3,
minorTickLength: 6,
minorTickInterval: 10
}, {
min: 0,
max: 140,
offset: -40,
labels: {
style: {
'font-size': '21px',
'font-family': 'arial, sans-serif',
color: '#ffffff'
},
distance: -45
},
lineColor: '#e63820',
lineWidth: 0,
tickLength: 20,
tickColor: '#e63820',
tickWidth: 4,
minorTickInterval: 2,
minorTickColor: '#e63820',
minorTickWidth: 4,
minorTickLength: 10
}]In this code, we gave min and max values to each axis that are relative to each other. Then we defined the offset so that one axis shows inside the other in the chart. For both the axes, we modified the properties relating to line, tick, and minor ticks, including their color, width, and length.
Now for the chart background, we might want to set a background image instead of using just a plain color or a default gradient. For this, we need to modify the pane and chart components:
chart: {
type: 'gauge',
plotBackgroundImage: 'img/blackorchid.png',
alignTicks: false
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: 'none',
borderColor: 'none'
}]
}By setting the backgroundColor and borderColor properties in pane to transparent, we made sure that the background image we set for the chart is displayed behind the pane too.
Then for the final part, we need to customize the dial needle that points to the values on the axes. This can be accessed in plotOptions.gauge.gauge, as shown in the following code:
plotOptions: {
gauge: {
dial: {
radius: '80%',
backgroundColor: '#fff',
baseWidth: 6,
rearLength: '10%'
}
}
}The full code can be found in the code examples accompanying this book.
The chart produced as a result of all of this customization will look like the following screenshot: