javascript - Hide first yAxis label in Highcharts - Stack Overflow

admin管理员组

文章数量:1421702

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.

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

What options do I need to add to acplish 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
  });
}

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.

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

What options do I need to add to acplish 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
  });
}

• javascript
• jquery
• highcharts

Share Improve this question Follow edited May 23, 2017 at 12:13 CommunityBot 111 silver badge asked Jul 3, 2015 at 12:07 kockburnkockburn 17.7k1010 gold badges9090 silver badges143143 bronze badges 1

• 2 yAxis.showFirstLabel set to false. – Paweł Fus Commented Jul 3, 2015 at 13:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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).

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./highcharts#yAxis.labels.formatter

本文标签： javascriptHide first yAxis label in HighchartsStack Overflow