Category axis with breaks is rendered incorrectly

[larsac07]

Expected behaviour

In a category axis, ticks and gridLines are supposed to be placed between tick labels, and not at them. They are at least not supposed to be drawn outside the plotArea.

Actual behaviour

Some ticks and gridLines are drawn outside the plotArea when defined in a category axis.

Additionally (and this may very well be another issue, but at least highly related), note that the tick labels which are not affected by the breaks are placed correctly between ticks ('zero', 'one' and 'nine'), while the ticks 'two' and 'eight', which are at the breaks, are placed at their respective ticks. That is, it may very well be that 'eight' is correctly placed between ticks, but 'two' is definitely not placed correctly.

Live demo with steps to reproduce

http://jsfiddle.net/larsac07/xb42p82g/6/

In the fiddle you can se that commit 4f617c3 caused the gridLines and ticks to be rendered incorrectly, but note that the issue with category label positioning still resides in commits before that.

Affected browser(s)

All

[larsac07]

Update: It seems the problem has always been there with category axes. The only reason it became so apparent after commit 4f617c3, is because the commit removed the clipPath hiding lines drawn outside the plotArea. If you look at the fiddle above, the ticks were always rendered outside the plotArea.

Same example on an X-axis: http://jsfiddle.net/larsac07/8vdvyjdr/2/

[larsac07]

Update: It seems the problem has always been there with category axes. The only reason it became so apparent after commit 4f617c3, is because the commit removed the clipPath hiding lines drawn outside the plotArea. If you look at the fiddle above, the ticks were always rendered outside the plotArea.

Same example on an X-axis: http://jsfiddle.net/larsac07/8vdvyjdr/2/