Chartjs-Chart.js how to make x-axis labels position top

by

1👍

✅

You can configure all scale related things like position in this namepsaces: options.scales[scaleId]. For more config options of the scales you can read the documentation: https://www.chartjs.org/docs/master/axes/

const ctx = document.getElementById('weather_chart');
const myChart = new Chart(ctx, {
  data: {
    datasets: [{
      type: 'bar',
      label: 'rainfall probability',
      data: [10, 20, 30, 40],
    }, {
      type: 'line',
      label: 'temperature',
      data: [50, 50, 50, 50],
      borderColor: '#EB6E4B',
      backgroundColor: '#EB6E4B',
    }],
    labels: ['now', '9am', '10am', '11am', '12pm'],
  },
  options: {
    scales: {
      x: {
        position: 'top'
      }
    },
    plugins: {
      legend: {
        display: false,
      },
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="chart">
  <canvas id="weather_chart"></canvas>
</div>

-1👍

inside options > scales > xAxes the xAxes is an array, so we can define multiple axis and there configuration like this:

options:{
    scales: {
        xAxes: [
            {
                position: 'top',
                ticks: {
                    maxRotation: 90,
                    minRotation: 80
                }
            }
        ]
    }
}

Checkout the example here
https://codepen.io/ganeshbkdm/pen/oNeaOwm

Leave a comment