Error in yaxis

[andrea-cinchetti]

When i set the yaxis if min < 0 there is an error: min in the page is 0 (not <0) and is in the middle of the graphic.

[jhuenges]

I am not quite sure I understand your problem correctly. What kind of chart are you using? Can you post some code and describe your problem a little bit more in detail?

[andrea-cinchetti]

in gaugedemo.html : ` `

in gaugedemo.js i change these values

yAxis: { min: -20, max: 50, title: { text: 'Speed' },

The gauge work so good but min is represented on this example with 0 instead -20 and in a wrong position. i'm not sure if i'm wrong with the code.

`

function builtGauge() {

$('#container-gauge').highcharts({
    chart: {
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    yAxis: {
        min: -20,
        max: 50,
        title: {
            text: 'Speed'
        },

        stops: [
            [0.1, '#55BF3B'],
            [0.5, '#DDDF0D'],
            [0.9, '#DF5353']
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickPixelInterval: 400,
        tickWidth: 0,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'Speed',
        data: [80],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:25px;color:#7e7e7e">{y}</span><br/>' +
                '<span style="font-size:12px;color:silver">C°</span></div>'
        },
        tooltip: {
            valueSuffix: ' C°'
        }
    }]
});
}

setInterval(function () {
    var chart = $('#container-gauge').highcharts(),
    point,
    newVal,
    inc;

if (chart) {
    point = chart.series[0].points[0];
    //inc = Math.round((Math.random() - 0.5) * 100);
    inc = players[0].temperatura;
    newVal = inc;

    if ( newVal > 200) {
        newVal = 50;
    }
    if (newVal < -20 ) {
        newVal = -20;
    }
    point.update(newVal);
}

}, 1000);

Template.gaugeDemo.rendered = function () {
builtGauge();
}`

[jhuenges]

I don't have a running meteor environment available at the moment. So I am just guessing. Could you try to use this as your yAxis config:

...
yAxis: {
  min: -20,
  max: 50,
  title: {
    text: 'Speed'
  },
  tickPositions: [-20, 50], // <-- this might fix it
  stops: [
    [0.1, '#55BF3B'],
    [0.5, '#DDDF0D'],
    [0.9, '#DF5353']
  ],
  lineWidth: 0,
  minorTickInterval: null,
  tickPixelInterval: 400,
  tickWidth: 0,
  title: {
    y: -70
  },
  labels: {
    y: 16
  }
},
...

[andrea-cinchetti]

I'm just trying and it works! thanks

[jhuenges]

Nice! Happy to help 🎉