Highcharts - Solid Gauge - Inconsistent Styling and Improper Values

Question

I have a website which makes use of HighCharts Solid Gauge .

There are two rows of gauges.

The first row of gauges is built as follows.

var workgroups =['WG01','WG02','WG04',
        'WG05','WG06','All'];

$(function ()
 {
    var gaugeOptions = {
        chart: {
            type: 'solidgauge'
        },
        title: 'Gauge',

        pane: {
            // Positioning
            center: ['50%', '60%'],
            // img size
            size: '100%',
            // full circle/half circle
            startAngle: -90,
            endAngle: 90,
            // gauge coloring
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#000',
                // Inner semi circle sizing
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                // Set the limits for coloring
                [0.1, '#55BF3B'], // green
                [0.4, '#DDDF0D'], // yellow
                [0.9, '#DF5353'] // red
            ],
            // Outside Line buffer
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                // Title Location
                y: -30
            },
            labels: {
                style:{
                    color: "#000000",
                    fontSize: "13px"
                },
                // Bottom Label Offset
                y: 15,
                distance: -10,
            }
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    style:{
                        color: "000000",
                        fontSize: "15px"
                    },
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };
    // The  gauges

    for( i in workgroups){
        if(workgroups[i] == 'All'){
            header = "All";
            gaugeOptions.yAxis['stops'] = [[.5, '#000000']]
        }else{
            header = "WG" + workgroups[i].slice(-2);
        }
        $('#'+workgroups[i]).highcharts(Highcharts.merge(gaugeOptions, {

            yAxis: {
             min: 0,
             max: 100,
                title: {
                    style:{
                        color: "#000000",
                        fontWeight: 'bold',
                        fontSize: '22px'
                    },
                    text: header
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: workgroups[i],
                data: [0],
                dataLabels: {
                    y: 40,
                    format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                        '<span style="font-size:12px;color:silver">clients</span></div>'
                },
            }]
        }));
    }
 }
);

and results in the following image.

This is fine, proper values, all styles fit where they are supposed to.

After doing these gauges, we then do a second row of gauges. The (Current) Configuration for these gauges are:

var application_array = new Array(3);
application_array['Sapphire'] = 50;
application_array['Magic Bullet'] = 35;
application_array['Boris'] = 30;

$(function ()
 {
    var gaugeOptions = {
        chart: {
            type: 'solidgauge'
        },
        title: 'Gauge',

        pane: {
            // Positioning
            center: ['50%', '85%'],
            // img size
            size: '150%',
            // full circle/half circle
            startAngle: -90,
            endAngle: 90,
            // gauge coloring
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#000',
                // Inner semi circle sizing
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                // Set the limits for coloring
                [0.1, '#55BF3B'], // green
                [0.4, '#DDDF0D'], // yellow
                [0.9, '#DF5353'] // red
            ],
            // Outside Line buffer
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                // Title Location
                y: -30
            },
            labels:{
                y:13
            }

        },


    };
    // Build the gauges here
    var license_gauges = document.getElementsByClassName('gaugeCell2');
    var myLength = license_gauges.length;
    for (i=0; i <myLength; i++){

        var header = license_gauges[i].id;
        var selector = "[id='"+header+"']";
        if (header == 'Boris'){
            var max_value = 30;
        }else if (header == 'Magic Bullet'){
            var max_value = 35;
        }else if (header == 'Sapphire'){
            var max_value = 50;
        }
        console.log(header)
        $(selector).highcharts(Highcharts.merge(gaugeOptions, {


            yAxis: {
             min: 0,
             max: max_value,
                title: {
                    style:{
                        color: "#000000",
                        fontWeight: 'bold',
                        fontSize: '22px'
                    },
                    text: header
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: header,
                data: [0],

            }]
        }));
    }

 });

Which Produces the following BAD Gauges

My Question

1) In the second row of gauges, Why is it printing 25 as max for the 2nd and 3rd gauge? - I have tried an associate array to hold the proper value, same issue occurs

• I have tried a function which returns a static value, same issue occurs
• I have tried logic in the gauge creation itself, same issue occurs
• I have tried writing a static value as max, and all gauges get the proper value

2) In the second row of gauges, why is it that the max Value, for the second and third gauges is inconsistently formatted with the first gauge?

• I have tried virtually every layout configuration I can think of, but yet it stays the same issue.

• When Using a static max value, this issue does not occur.

• Do I need to make an individual gaugeoption for each gauge since they have different max values? I would like to use 1 gauge style for the top row and 1 gauge style for the bottom row (fatter).

A JSFiddle has been created here. There is most likely extraneous code (especially css), as I wanted to get it up and running quickly.

http://jsfiddle.net/v341z7tk/1/

Thanks for reading

Answer 1

I was having the same issue, but following what Halvor Strang said solved my problem like so

displayOptions.yAxis.min = widget.display.minimum;
displayOptions.yAxis.max = widget.display.maximum;
displayOptions.yAxis.tickPositions = [widget.display.minimum, widget.display.maximum];

distorted labels - Minimum and maximum out of place

Answer 2

Why is it printing 25 as max for the 2nd and 3rd gauge?

It isn't. That is, the max isn't 25, but the drawn axis label shows the value 25, as there is an axis tick at this value. The max value is not showing with a label.

why is it that the max Value, for the second and third gauges is inconsistently formatted with the first gauge?

The position is inconsistent because the 25 label is in varying positions depending on what the max value is. In your case it is 35 and 30 for the last two gauges.

Do I need to make an individual gaugeoption for each gauge since they have different max values?

No. From my understanding you want a label at the start (0) and end (max_value). To get this you need to ensure that the axis ticks (which have associated labels) are at these positions, and only these.

A simple way is this (JSFiddle):

yAxis: {
    min: 0,
    max: max_value,
    tickPositions: [0, max_value], // Ensure position of ticks, which have labels
    // ...
}