3

I'm following this example in order to understand how the solidgauge chart works:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-activity/

plotOptions: {
    solidgauge: {
        borderWidth: '34px',
        dataLabels: {
            enabled: false
        },
        linecap: 'round',
        stickyTracking: false
    }
},

In this example, a 34px borderWidth works fine. But if I change the size of the chart or change the outerRadius or innerRadius for the backgrounds in the pane object the 34px borderWidth does not match the background anymore (as expected).

I tried to figure out a formula for the borderWidth that includes the size of the chart, whether I have a legend or not (the legend consumes size) and the inner and outer Radius of the background, unfortunatelly with no success :( Although I'm almost there, most of the times I miss the right value for 1, 2 or 3 pixels, so I must be forgoting something.

The big problem, as I see, is that I must transform sizes expressed in percentages for the background in pixels for the borderWidth.

Does anybody have any suggestions? Thanks in advance.

Mike Zavarello
  • 3,514
  • 4
  • 29
  • 43
Gustavo Martínez
  • 56
  • 2
  • Have you tried using percentages for `borderWidth`? I got reasonably good results with 8 or 9% when I adjusted the chart size between 300 to 700 pixels in width and height. – Mike Zavarello May 31 '16 at 02:37

1 Answers1

0

It is possible to get width from arcs that are created in chart's background. Then use that calculated width to update series. Here all panes are of equal width, so it is possible to get one width and set it to all series.

Example: http://jsfiddle.net/xs0gj2zu/

var token = true;
Highcharts.chart('container', {

    chart: {
        type: 'solidgauge',
        marginTop: 50,
        events:{
            load: function(){
                token = false;
              var each = Highcharts.each,
                  series = this.series,
                  band = this.yAxis[0].plotLinesAndBands[0],
                  d = band.svgElem.d.split(" "),
                  width = parseFloat(d[13]) - parseFloat(d[2]);

              each(series, function(s){
                s.update({borderWidth: width}, false);
              });
              this.redraw();
              token = true;
          },
            redraw: function(){
            if(token) {
                token = false;

              var each = Highcharts.each,
                  series = this.series,
                  band = this.yAxis[0].plotLinesAndBands[0],
                  d = band.svgElem.d.split(" "),
                  width = parseFloat(d[13]) - parseFloat(d[2]);

              each(series, function(s){
                s.update({borderWidth: width}, false);
              });
              this.redraw();

              token = true;
            }
          }
        }
    },
    ...

(The token is a variable used to avoid infinite loops, because redraw is called in redraw.)

Kacper Madej
  • 7,846
  • 22
  • 36
  • That worked perfect! Thank you. Just one small thing. Is it possible to keep the animation when doing it this way? I tried calling the redraw method with the animation parameter in true (this.redraw(true)) but it seems to ignore it. – Gustavo Martínez Jun 01 '16 at 16:07
  • @GustavoMartínez No, it is not possible. However, if load event code will be moved to a wrapper around `drawPoints` function of `solidgauge.prototype` function then initial animation will be done - demo with the wrapper: http://jsfiddle.net/osc6myh9/ – Kacper Madej Jun 02 '16 at 10:14