Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide first yAxis label in Highcharts

I'm looking to hide the first yAxis label in highcharts. I am unable to find how to do this option. This question closely ressembles this question: Hide first yaxis label . However the solution I'm looking is for highcharts.

yaxis hide

From the image above, I would just like for the -10 to be hidden.

What options do I need to add to accomplish this?

The code added below is just a generic function I've created that takes in a parameter that I have named options (an object) that I've set with a list of options (such as title, subtitles, series... ).

var hc_bubble = function(options){
  $(options.target).highcharts({
      chart: {
        type: 'bubble',
        zoomType: 'xy'
      },
      title: {
        text: options.title || 'unknown'
      },
      subtitle: {
        text: options.subtitle || ''
      },
      xAxis: {
        type: options.date || 'datetime',
        labels: {
                  formatter: function() {
                      return Highcharts.dateFormat("%b %Y", this.value)
                  }
              },
        title: {
          enabled: true,
          text: options.xTitle || 'unknown'
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
      },
      yAxis: {
        title: {
          text: options.yTitle || 'unknown'
        }
      },
      tooltip:{
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.y} ' + options.yType || 'Connections'
      },
      series: options.series
  });
}
like image 208
kemicofa ghost Avatar asked Jul 03 '15 12:07

kemicofa ghost


2 Answers

While your solution works, there is a slightly more generic solution you might like if your intent is always to prevent the yAxis having a label at the bottom left:

yAxis: {
    labels: {
        formatter: function() {
            if ( this.isFirst ) { return ''; }
            return this.value;
        }
    }
},

Making use of the isFirst property that Highcharts has on this prevents your reliance on "magic numbers" (similarly, there is an isLast value if you'd like to try that -- though I don't see as much use for it).

like image 68
TZHX Avatar answered Nov 06 '22 19:11

TZHX


I wasn't going to post this question at first because I just found the answer (after searching in the docs for a while) but I figured this could help others.

Simply make sure you add the formatter callback in your labels object:

  yAxis: {
    labels:{
      formatter: function(){
        if(this.value >= 0){
          return this.value;
        }
      }
    }
  }

http://api.highcharts.com/highcharts#yAxis.labels.formatter

like image 2
kemicofa ghost Avatar answered Nov 06 '22 19:11

kemicofa ghost