Accepted answer

i am not sure if it is possible to achieve it by using only api options, because all the labels are rendered in the center of the tick, but you can move/set the position of each label 'manually'.

    events: {
        render() {
            const chart = this;
            const xaxis = chart.xaxis[0];
            const lasttickposition = xaxis.tickpositions.length - 1;
            const lastlabel = chart.xaxis[0].ticks[lasttickposition].label;
            lastlabel.translate(-lastlabel.getbbox().width/ 4, 0)




you can use "align: right" read the usage of align to understand why this works. basically this would mean that the bar would align to the rightmost end of the label so the label always fits

xaxis: {
      categories: [....],
      labels: {
          rotation: 0,
          align: "right",
          style: {
            textoverflow: 'none',
            whitespace: 'nowrap'

Related Query

More Query from same tag