Skip to content

July 1, 2012

How to plot a horizontal gauge chart in Highcharts

by Joe Kuan

It is simple to plot a horizontal gauge chart. The main concept is a chart with single bar and the whole plot area is restricted to the size of the gauge. Here is a screenshot of the horizontal gauge chart

In order to restrict the plot area size, we first have to have a fixed container size.

    <div id="content">
    <div style="height: 120px;" id="container"></div>

Then we define the bar chart with a fixed width and a light background color in the plot area:

            chart: {
                renderTo: 'container',
                defaultSeriesType: 'bar',
                plotBorderWidth: 2,
                plotBackgroundColor: '#F5E6E6',
                plotBorderColor: '#D8D8D8',
                plotShadow: true,
                width: 350

In general, gauge chart is in the range of percentage. So we can define a regular interval along the y-axis, i.e. every 20% for main interval and 10% for sub-interval

           yAxis: {
                title: {
                    text: null
                labels: {
                    y: 20
                min: 0,
                max: 100,
                tickInterval: 20,
                minorTickInterval: 10,
                tickWidth: 1,
                tickLength: 8,
                minorTickLength: 5,
                minorTickWidth: 1,
                minorGridLineWidth: 0

As for the x-axis, we don’t want the default interval tick line.

            xAxis: {
                labels: {
                    enabled: false
                tickLength: 0

The final part is to define the series data. First, we want to fix the width of the data point which is the width of the single bar chart. Secondly, in order to make the gauge chart visually pleasant, the background color should be in the similar range to the bar. We also use color gradient to give the gauge chart a bit of a 3D look. The following is the definition of the series array:

           series: [{
               borderColor: '#7070B8',
               borderRadius: 3,
               borderWidth: 1,
               color: {
                   linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                   stops: [ [ 0, '#D69999' ],
                            [ 0.3, '#B84D4D' ],
                            [ 0.45, '#7A0000' ],
                            [ 0.55, '#7A0000' ],
                            [ 0.7, '#B84D4D' ],
                            [ 1, '#D69999'] ]
               pointWidth: 50,
               data: [ 56.1 ]

You can see this demo in jsFiddle.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: