How to change x-Axes label position in Chart.js. x-Axes labels should be display inside of the chart instead of outside

Question

Invision Image link here

I am using Angular 13 and chart.js 3.7.1. I would like to have the x-axis labels should be moved beside the bar and inside the chart instead of displayed outside of the chart.

Answer 1

This can be done with chartjs-plugin-datalabels. It offers many options for positioning the labels.

Please take a look at below runnable code and see how it could be done.

Chart.register(ChartDataLabels);
new Chart("barChart", {
  type: 'bar',
  data: {
    labels: ['One', 'Two', 'Three', 'Four'],
    datasets: [{
      label: 'Data',
      data: [5, 8, 24, 14],
      backgroundColor: 'rgb(124, 124, 255)'
    }]
  },
  options: {
    plugins: {
      datalabels: {
        align: 'left',
        rotation: -90,
        offset: 50,
        font: {
          weight: 'bold'
        },
        formatter: (v, ctx) => ctx.chart.data.labels[ctx.dataIndex]
      }
    },
    scales: {
      x: {
        ticks: {
          display: false
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<canvas id="barChart" height="100"></canvas>