Chart.js: [FEATURE] Allow Axis ticks to render inside chart bounds e.g. `ticksInside`

[benfrain]

My request is relevant to line charts. I wonder if there could be an option to render ticks inside the chart area?

Here's an xAxis example of how things layout without the xAxis shown:

As you can see, when I hide the xAxis scales the chart displays full-width perfectly, edge to edge.

However, when I enable the xAxis I get padding left and right of the chart to facilitate the tick label sitting centrally with the first and last data point:

Request

Would you consider adding an option that spaces the tick labels inside the chart bounds? To illustrate, the feature would allow a layout like this with ticks in either Axis rendered within the chart bounds:

Environment

Chart js 2.6.0

[etimberg]

@benfrain there is a mirror option on the vertical axes that might solve this for you

axisOptions = {
  ticks: {
    mirror: true
  }
}

[benfrain]

@etimberg I have this config currently for the yAxis (as discussed the xAxis mirror doesn't work yet, ) which lets the yAxis ticks sit inside, is that what you meant?

{
    yAxisID: "y-axis-0",
    ticks: {
        beginAtZero: false,
        mirror: true,
    },
    gridLines: {
        display: true,
        drawTicks: false,
    },
},
{
    position: "right",
    id: "y-axis-1",
    ticks: {
        beginAtZero: false,
        mirror: true,
    },
    gridLines: {
        display: false,
        drawTicks: false,
    },
},

That places the Y axis ticks inside nicely but padding appears either side of the canvas currently due to the X axis ticks rendering to the side of the main graph bounds.

[etimberg]

That is what I meant. I see you've already tried that. One generic solution to this is to allow different tick alignments. As you noticed, the tick is center aligned to the value. We could add something that allows different alignments: 'left'|'center'|'right'|'auto' and 'auto' would put left for the first tick, center for the middle ticks and right for the last tick. I think I tried implementing this about a year ago and ran into issues. I can't recall what they exactly were.

[benfrain]

@etimberg that sounds ideal! Would certainly fix my problem :)

[himynameisubik]

Is this still being worked on? Would love to see this feature.

[olivermuc]

+1 This would add a huge UX factor, especially in state of the art chart designs.

[Helmi]

+1 any news on that?

[alinearielo]

+1

[royduin]

Any updates? I've tried to remove the first and last trick because those are causing the padding:

'afterTickToLabelConversion' => function (settings) {
    settings.ticks[0] = null;
    settings.ticks[settings.ticks.length - 1] = null;
}

But it's not working :( Maybe we can setup a Bountysource to get this implemented? Related: https://github.com/chartjs/Chart.js/issues/4997 with a nasty fix, but it's working...

[ilomon10]

+1 Any updates?