CODEWITHSUNDEEP
javascripthighcharts
Jason Chen
Jason Chen

Reputation: 2577

Highcharts assign label to to x-axis max value

I have a Highcharts chart with a max x-axis value set. Can be seen at:

http://jsfiddle.net/7N8he/28/

What I want to do is set a label for my max x-axis. So at the end of my chart where it says 100, I want to be able to set that to a random string, like butterfly. My x-axis values are set to category, so I don't care that the x-axis is showing numbers.

My JavaScript code is like so:

$('#container').highcharts({
    xAxis: {
        type: 'category',
        max: 100
    },
    series: [{
        data: [0, 1, 56, 32]
    }]
});

Unsure if there is a function in Highcharts that will allow me to do this.

The other option I have in mind for accomplishing this is by writing out every category. Like I have in this:

http://jsfiddle.net/7N8he/29/

However, I am hoping there is a less redundant way of achieving this, since I only want to alter the last x-axis value of a series that has not reached the end (ie the max x-axis). You will note that in both my examples, the data points do not reach the x-axis.

Upvotes: 2

Views: 1246

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

You can do like this

  chart: {
    events: {
      load: function() {
        //console.log(this.xAxis[0])
        this.xAxis[0].paddedTicks[this.xAxis[0].paddedTicks.length - 1] = "butterfly";  //update last element of array

        this.update({
          xAxis: {
            categories: this.xAxis[0].paddedTicks,
            max: this.xAxis[0].tickPositions.length-1 //update chart max value to number of element in category array
          }
        })
      }
    }
  },

Note full page demo will show correctly

$('#container').highcharts({
  chart: {
    events: {
      load: function() {
        this.xAxis[0].paddedTicks[this.xAxis[0].paddedTicks.length - 1] = "butterfly";
        //console.log(this.xAxis[0])
        this.update({
          xAxis: {
            categories: this.xAxis[0].paddedTicks,
            max: this.xAxis[0].tickPositions.length-1
          }
        })
      }
    }
  },
  xAxis: {
    type: 'category',
    max: 100
  },

  series: [{
    data: [0, 1, 56, 32]
  }]

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.highcharts.com/highcharts.js"></script>
<script src="https://github.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>

Fiddle demo

Upvotes: 2

Related Questions