score:0

in case you want to produce a horizontal bar chart, you could define the x-axes as follows:

scales: {
  x: {
    min: 0
  },
  x1: {
    position: 'top',
    min: 0,
    max: 9
  }
}

please take a look at the runnable sample below and see how it works when the data is dynamic:

var data = [3, 6, 8, 9, 31];

new chart('mychart', {
  type: 'bar',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e'],
    datasets: [{
      data: data,
      bordercolor: '#00d',
    }]
  },
  options: {
    indexaxis: 'y',
    plugins: {
      legend: {
        display: false
      }
    },
    scales: {
      x: {
        min: 0,
        max: math.max(...data)
      },
      x1: {
        position: 'top',
        min: 0,
        max: math.max(...data)
      }
    }
  }
});
canvas {
  max-height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.min.js"></script>
<canvas id="mychart"></canvas>

score:1

in case you want the see the same ticks at the top of the chart, simply define a second x-axis as follows:

x1: {
  position: 'top'
}

please take a look at below runnable code and see how it works:

new chart('mychart', {
  type: 'line',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e', 'f'],
    datasets: [{    
      data: [1, 3, 6, 2, 8, 9],
      bordercolor: '#00d',
    }]
  },
  options: {
    scales: {
      x: {
      },
      x1: {
        position: 'top'
      }
    }
  }
});
canvas {
  max-height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.min.js"></script>
<canvas id="mychart"></canvas>


Related Query

More Query from same tag