888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Nitpicky: how to 'crop' the xAxis labels of the navigator from showing outside the chart width

I am using the following code to draw a grey background above the chart, where the Navigator is placed:

Code: Select all

function drawXAxisBackground() {
  var chart = this,
    xAxis = chart.xAxis[0],
    height = 155,
    position = {
      x: chart.plotLeft,
      y: chart.plotTop - height - 20,
      width: xAxis.len,
      height: height
    };

  if (!xAxis.background) {
    xAxis.background = chart.renderer.rect().attr({
      fill: 'grey',
    }).attr(position).add();
  } else {
    xAxis.background.animate(position);
  };

};
The xAxis labels of the highchart show very nicely, but the problem is at the far right side. Where the last date (in this case February 2nd) is shown outside of the chart area.

See the following image:

Image
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Nitpicky: how to 'crop' the xAxis labels of the navigator from showing outside the chart width

Hi,

Could you reproduce your case in an online code editor?
I don't know how all your config looks and this will help me better understand your problem.

Best regards.
Sebastian Hajdus
Highcharts Developer
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: Nitpicky: how to 'crop' the xAxis labels of the navigator from showing outside the chart width

Hi sebastian. There is an example of the minor 'issue' here: https://jsfiddle.net/BlackLabel/cvtLbf1h/ at the far right side, where it says 29th of January.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Nitpicky: how to 'crop' the xAxis labels of the navigator from showing outside the chart width

Hi,

Thanks, for the example.
I found some way to hide navigator labels, try to set chart.spacingRight, this will push the chart to the edge and the labels will not stick out.

Live demo:
https://jsfiddle.net/BlackLabel/rgoqnx9w/

API References:
https://api.highcharts.com/gantt/chart.spacingRight

Let me know if this is a "satisfactory solution".
Best regards.
Sebastian Hajdus
Highcharts Developer
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Nitpicky: how to 'crop' the xAxis labels of the navigator from showing outside the chart width

That's great to hear!
Sebastian Hajdus
Highcharts Developer
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: Nitpicky: how to 'crop' the xAxis labels of the navigator from showing outside the chart width

I now place the container inside an extra div, such that I can, on the right side visually 'insert' additional padding. Such that the background-color extends areound the highchart.

And the spacingRight can be changed when exporting (the navigator isn't present there any way in my preset), so no problem there.

One problem I encountered still is when you choose 'View in full screen'. :) Then it looks sort of strange because all the padding is removed. Perhaps would it be possible to solve it by loading the extra encompassing parent div in full-screen, which I mentioned I above? Instead of the usual highcharts container? So, go one level up, so to say.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Nitpicky: how to 'crop' the xAxis labels of the navigator from showing outside the chart width

Hi again,

The solution that came to mind is to stretch the custom background a few pixels to the right (line 8 at code).
The label is now on the drawn background.

Live demo:
https://jsfiddle.net/BlackLabel/5bm1qLdj/

Regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”