The problem occurs when max is set to a very large number such as 666772. Highcharts will take the number and round it down depending on what tickPixelInterval is set to.

If I set the tickPixelInterval value closer to 0, then the max number on the Gauge chart starts getting closer to 666772, but is still rounded. I would like for the min to start at 0 (which it does), and then for the max to be the exact number (666772), or even a rounded down version (667k).

Is there a way to do this with only the min and the max showing on the Gauge chart?

   var gaugeOptions = {

    chart: {
      type: 'solidgauge'
    },

    title: null,

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

    // the value axis
    yAxis: { 
      stops: [
        [0.1, '#DF5353'], // green
        [0.5, '#DDDF0D'], // yellow
        [0.9, 'green'] // red
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickPixelInterval: 400,
      tickWidth: 0,
      endOnTick: false,
      maxPadding: 0,
      title: {
        y: -70
      },
      labels: {
        y: 10,
        format: '{value}'
      }
    },

    credits: {
      enabled: false
    },

    tooltip: {
        enabled: false
    },

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

  };

  // Quarter1
  jQuery('#quarter1').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
      min: 0,
      max: 666772,
      title: {
        text: 'Quarter 1'
      }
    },

    series: [{
      name: 'Quarter 1',
      data: [50],
      dataLabels: {
        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">Quota</span><br/><span>Bonus Elegible</span></div>'
      }
    }]

  }));

The problem occurs when max is set to a very large number such as 666772. Highcharts will take the number and round it down depending on what tickPixelInterval is set to.

If I set the tickPixelInterval value closer to 0, then the max number on the Gauge chart starts getting closer to 666772, but is still rounded. I would like for the min to start at 0 (which it does), and then for the max to be the exact number (666772), or even a rounded down version (667k).

Is there a way to do this with only the min and the max showing on the Gauge chart?

   var gaugeOptions = {

    chart: {
      type: 'solidgauge'
    },

    title: null,

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

    // the value axis
    yAxis: { 
      stops: [
        [0.1, '#DF5353'], // green
        [0.5, '#DDDF0D'], // yellow
        [0.9, 'green'] // red
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickPixelInterval: 400,
      tickWidth: 0,
      endOnTick: false,
      maxPadding: 0,
      title: {
        y: -70
      },
      labels: {
        y: 10,
        format: '{value}'
      }
    },

    credits: {
      enabled: false
    },

    tooltip: {
        enabled: false
    },

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

  };

  // Quarter1
  jQuery('#quarter1').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
      min: 0,
      max: 666772,
      title: {
        text: 'Quarter 1'
      }
    },

    series: [{
      name: 'Quarter 1',
      data: [50],
      dataLabels: {
        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">Quota</span><br/><span>Bonus Elegible</span></div>'
      }
    }]

  }));

• javascript
• math
• highcharts

• I'm not sure I understand the problem. From what I can see the max is correct. Are you talking about the number labels on the y axis? – Halvor Holsten Strand Commented May 26, 2015 at 21:40

3 Answers 3

Use this code for displaying the min and max of exact amount.

yAxis: {
min: 0,
max: 2602,
tickPositioner: function() {
  return [this.min, this.max];
} 

Add endOnTick:false (http://api.highcharts./highcharts#yAxis.endOnTick) to your axis. For example

 yAxis: {
  min: 0,
  max: 666772,
  title: {
    text: 'Quarter 1'
  },
  endOnTick:false
}

Here's the working sample http://plnkr.co/edit/Vbn1lpMIv8qvSfs65jL4

There was another alternative way of doing this that I found out. If you replace tickPixelInterval: 400, with tickAmount: 2, then it will show only the min and max.