I'm new to chart.js, and I have a question about making x-axis labels position to the top.

This is the result that I expected: x-axis labels are on the top.

And this is my attempt:

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: {
        plugins: {
            legend: {
                display: false,
            },
        }
    }
});

<script src=".js"></script>
<div id="chart">
  <canvas id="weather_chart"></canvas>
</div>

I'm new to chart.js, and I have a question about making x-axis labels position to the top.

This is the result that I expected: x-axis labels are on the top.

And this is my attempt:

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: {
        plugins: {
            legend: {
                display: false,
            },
        }
    }
});

<script src="https://cdn.jsdelivr/npm/chart.js"></script>
<div id="chart">
  <canvas id="weather_chart"></canvas>
</div>

If it is possible, would you take your time to write the answer?

Thanks in advance, and if my question is insufficient, I would appreciate it if you could tell me.

• javascript
• chart.js
• x-axis

• Can you show us any attempts you've made? Take a look at this stackoverflow./help/how-to-ask – about14sheep Commented Nov 15, 2021 at 3:18
• Oh, I missed it. I truly apologize. I edited it and would this makes work? – chunzhi23 Commented Nov 15, 2021 at 4:15

2 Answers 2

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/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/npm/chart.js"></script>
<div id="chart">
  <canvas id="weather_chart"></canvas>
</div>

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