globallogic
Posts: 34
Joined: Wed Jan 10, 2018 6:19 am

How to draw last label of xAxis using xAxis Steps.

Hello,

How to forcefully draw the last label of xAxis, when using xAxis steps.

Please consider the example below.

I want to draw label Dec at the end of xAxis, no matter what xAxis step is.

http://jsfiddle.net/yogesh_paisode/mp436afh/4/
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: How to draw last label of xAxis using xAxis Steps.

Hi, globallogic!

We can forget about step property and use formatter function to define which labels we want to display:

Code: Select all

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    labels: {
      formatter() {
      	let label = this;
        if (label.pos % 3 === 0 || label.isLast) {
          return label.value
        }
      }
    }
  },
jsFiddle: http://jsfiddle.net/BlackLabel/cw5pjLsa/

API: https://api.highcharts.com/highcharts/x ... .formatter

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
[email protected]
Posts: 3
Joined: Thu Jun 25, 2020 11:05 am

Re: How to draw last label of xAxis using xAxis Steps.

@rafalS What if the step is set automatically by Highcharts, e.g. when too much data is there? I tried using the s'howLastLabel' option but is not working. I have an example here: http://jsfiddle.net/huo5m14d/ If you play with the width of the right panel making the chart smaller and bigger you will see that the last label is cut if the panel is too small, but I would like to always have it there, i.e. last label should be 'december'.
[email protected]
Posts: 3
Joined: Thu Jun 25, 2020 11:05 am

Re: How to draw last label of xAxis using xAxis Steps.

Here I have another example where using a fix width for the graph the last label is not showing despite the 'showLastLabel' flag: https://jsfiddle.net/dogwqh2m/3/
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: How to draw last label of xAxis using xAxis Steps.

Hello!

We appreciate you reaching out to us!

As you can read in the API showLastLabel property is automatically enabled for cartesian charts, which are the ones you've provided.

The ticks are calculated dynamically depending on the size of the chart, that's why the last label is not always visible. As my colleague wrote in the post above if you want to make sure that the last label is displayed on the axis you need to use formatter function and return the label that has the flag isLast.

There's always an option to use such property as tickPositions to put there all the ticks you want to display on the axis. So it's an option you can try too.

API references:
https://api.highcharts.com/highcharts/x ... kPositions
https://api.highcharts.com/highcharts/x ... .formatter
https://api.highcharts.com/highcharts/x ... wLastLabel

Demo:
https://jsfiddle.net/BlackLabel/8zLwhy76/ <- tickPositions
https://jsfiddle.net/BlackLabel/vtng5ys9/ <- formatter

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Usage”