[Chartjs]-Set min value for bar chart in chart.js

by

0👍

✅

Note that in your JSFiddle, you’re using the latest version of Chart.js (currently v4.3.0) but your options are still of format v2.n.

Define options as follows and it will work.

const options = {
    indexAxis: 'y',
    responsive: true,
    scales: {
      x: {
        display: true,
        min: -100,
        max: 100,
        beginAtZero: false,
        ticks: {
          beginAtZero: false
        }
      }
    }
};

0👍

You need an x key in the scales with just an object with min and max:

const ctx = document.getElementById('myChart');

const data = {
    datasets: [{
        label: 'hrs',
        data: [
            [-10, 50]
        ],
    }],
    labels: ["Overtime"]
};

const options = {
    indexAxis: 'y',
    responsive: true,
    scales: {
        x: {
            display: true,
            min: -100,
            max: 100,
            beginAtZero: false,

        }
    }
};

new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options,
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
    <canvas id="myChart" height="120"></canvas>
</div>

Leave a comment