It is currently Wed Sep 26, 2018 3:54 am Advanced search

Edge ticks slightly outside axes

Technical support, bug reports and more.

Edge ticks slightly outside axes

Postby mmeza » Fri Jan 05, 2018 6:33 pm

Hello,

We're generating charts as can be seen here: http://jsfiddle.net/ppotaczek/bspox6b9/. For the x axis we're using tickPositions, startOnTick = true and endOnTick = true, and for the y axis we're using min and max. In both cases, about half of each edge tick seems to be shown outside the corresponding axis, as can be seen here:

ticks.png
ticks.png (22.19 KiB) Viewed 223 times


Is it possible in both cases, to get sharp corners like this?

ticks.sharp.png
ticks.sharp.png (17.17 KiB) Viewed 223 times


I get the feeling that the ticks are shown the way they are to ensure that the actual values represented by said ticks are exactly on the edges of the axes, but we'd prefer to lose that precision in favor of sharp corners.

Is it possible to achieve what we're after?
mmeza
 
Posts: 6
Joined: Fri Jan 05, 2018 11:28 am

Re: Edge ticks slightly outside axes

Postby ppotaczek » Mon Jan 08, 2018 7:50 pm

Hi mmeza,

I used wrap method to achieve needed result. Ticks are moved by half axis width to get sharp corners.

Code: Select all
Highcharts.wrap(Highcharts.Tick.prototype, 'renderMark', function(proceed, xy) {
  var axisW = this.axis.userOptions.lineWidth;

  if (this.axis.isXAxis) {
    xy.y -= Math.floor(axisW / 2);
  } else {
    xy.x += Math.floor(axisW / 2);
  }

  proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});


Live demo: http://jsfiddle.net/ppotaczek/bbjrfqq3/
API Reference: https://api.highcharts.com/class-refere ... harts#wrap

Best regards!
Paweł Potaczek,
Highcharts Developer
ppotaczek
 
Posts: 743
Joined: Mon Oct 02, 2017 5:12 pm

Re: Edge ticks slightly outside axes

Postby mmeza » Thu Jan 11, 2018 6:11 pm

Thank you Paweł!
mmeza
 
Posts: 6
Joined: Fri Jan 05, 2018 11:28 am

Re: Edge ticks slightly outside axes

Postby mmeza » Fri Jan 12, 2018 10:36 am

I've been testing your solution and it works very well overall, I just have a small problem: If I set the "opposite" field to true for the Y axis, the ticks are not modified by the wrap function (I updated your jsfiddle to show this). Are opposite axis handled differently? Unfortunately I wasn't able to find anything on renderMark in the API, and so I'm not sure how to fix the problem. Is it possible to also modify the ticks for axes that have the "opposite" field set to true?
mmeza
 
Posts: 6
Joined: Fri Jan 05, 2018 11:28 am

Re: Edge ticks slightly outside axes

Postby mmeza » Fri Jan 12, 2018 10:56 am

Nevermind, I figured it out. The key was precisely in checking the "opposite" field, as seen below. :oops:

Thank you!



Highcharts.wrap(Highcharts.Tick.prototype, 'renderMark', function(proceed, xy) {
const axisW = this.axis.userOptions.lineWidth;

if (this.axis.isXAxis) {
xy.y -= Math.floor(axisW / 2);
} else {
if (this.axis.opposite) {
xy.x -= Math.floor(axisW / 2);
} else {
xy.x += Math.floor(axisW / 2);
}
}

proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
mmeza
 
Posts: 6
Joined: Fri Jan 05, 2018 11:28 am

Re: Edge ticks slightly outside axes

Postby ppotaczek » Fri Jan 12, 2018 8:10 pm

Hi mmeza,

If ticks are located on the other side of the axis, it is necessary to change mathematical operation sign.
Thank you for sharing your solution, it can be useful for future users.

Best regards!
Paweł Potaczek,
Highcharts Developer
ppotaczek
 
Posts: 743
Joined: Mon Oct 02, 2017 5:12 pm


Return to Highcharts Usage

Who is online

Users browsing this forum: Bing [Bot] and 4 guests