[Chartjs]-Chartjs React Typescript moving x axis labels above chart

by

1👍

To make the labels appear on top in V3 of chart.js you need to specify the position to top in options.scales.x like so:

options: {
  scales: {
    x: {
      position: 'top'
    }
  }
}

To achieve multi line labels you will need to define your labels array as arrays for the the labels that have to be multi lined. Each entry in the nested arrray will be a new line

labels = ['singel line', ['line 1', 'line 2'], ['line 1', 'line 2', 'line3']]

Live Example:

const options = {
  type: 'bar',
  data: {
    labels: ['singel line', ['line 1', 'line 2'], ['line 1', 'line 2', 'line3']],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3],
        backgroundColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5],
        backgroundColor: 'pink'
      }
    ]
  },
  options: {
    scales: {
      x: {
        position: 'top'
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

0👍

Apologies in advance since I’m not familiar with Typescript, but hopefully the following answers will be of help to you regardless.

  1. To position the x-axis labels, try adding the following scales details to your options:
const options =  {
  responsive: true,
  maintainAspectRatio: true,
  plugins: {
    legend: {
      display: false
    }
  },
  scales: {
    xAxes: [{
      position: "top"
    }]
  }
}
  1. I don’t know if it’s possible to make the labels wrap, but an alternative responsive solution might be to use a variable for the fontSize of the ticks (labels) and vary the fontSize value based on the size of the screen using a media query. For example:
import { useMediaQuery } from "react-responsive";  

const isMobile = useMediaQuery({ query: '(max-width: 480px)' });
const responsiveFontSize = isMobile ? 12 : 16;

const options =  {
  responsive: true,
  maintainAspectRatio: true,
  plugins: {
    legend: {
      display: false
    }
  },
  scales: {
    xAxes: [{
      position: "top"
    }]
    ticks: {
      fontSize: responsiveFontSize,
    }
  }
}

Leave a comment