Zohair Zaman Zohair Zaman - 3 months ago 36
CSS Question

Highcharts Gauge styling and adding CSS elements

I'm working on a gauge module which is intended to look as follows:

Hydration Guage

Currently, I have the following model working:

(Please refer to the fiddle for the most updated code)

GaugeFiddle

$(function() {

var chart = new Highcharts.Chart({

chart: {
renderTo: 'container',
type: 'gauge'
},
title: {
text: 'Hydration Index'
},

pane: {
startAngle: -140,
endAngle: 140,
size: 200,
background: {
backgroundColor: {
linearGradient: [0, 300, 300, 300],
stops: [
[0, 'rgb(152, 230, 230)'],
[1, 'rgb(0, 0, 10)']
]
},
innerRadius: '70%',
outerRadius: '100%',
shape: 'arc',
}
},


yAxis: {
reversed: true,
min: 0,
max: 100,
plotBands: [{ // mark the weekend
}],
tickInterval: 600
},


plotOptions: {

gauge: {
dataLabels: {
enabled: false
},

dial: {
radius: '100%',
backgroundColor: 'black',
borderColor: 'white',
borderWidth: 0.5,
rearLength: 0,
baseWidth: 10,
topWidth: 1,
baseLength: '0%'
},
pivot: {
radius: 0
}
},

},


series: [{
name: 'Hydration percent',
data: [20],
}],

credits: {
enabled: false
},
});

});


1) How would I add those curved edges on only one side of the gauge?

2) Can I reverse the direction of the needle from clockwise to counterclockwise? Currently, I have the yaxis reversed so the graph works how it is supposed to, but it counter-intuitively starts at high and proceeds from there onward (So if my chart goes from 0-100 and my data value is 10, it would start at 100 and go to 10 by default).

3) Finally, is there any way for me to add the dynamic text that changes based on the result?

Answer
  1. It's possible but a bit tricky - you can modify SVG's path before it's renderer by modyfying Axis.getPlotBandPath method. See a demo below.

  2. You can simply disable initial animation and set value = 0. Then, in callback, update the point to the correct value:

    series: [{
      name: 'Hydration percent',
      animation: false,
      data: [
        0
      ]
    }],
    

    And callback:

    function(chart) { // on complete
      chart.series[0].points[0].update(80);
      ...
    }
    
  3. It's not a problem using Renderer.text. For example:

    chart.myLabel = chart.renderer.text('Test', 10, 10).add(); // store in some variable
    

    Then update text:

    chart.myLabel.attr({
      text: 'Nice!'
    });
    

Here is a working demo: http://jsfiddle.net/8p8ab8bg/