[Chartjs]-Chartjs : how to set custom scale in bar chart

by

18👍

✅

Also include scaleStartValue and scaleStepWidth as stated in docs.

Example

This example creates a bar chart with Y-axis starting at 0 and ending at 900. To do that, step width is set to 100 and number of steps are set to 9.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
    <body>
      <canvas id="income" width="600" height="400"></canvas>
    </body>
</html>

JS

var barData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
        {
            fillColor : "#48A497",
            strokeColor : "#48A4D1",
            data : [456,479,324,569,702,600]
        },
        {
            fillColor : "rgba(73,188,170,0.4)",
            strokeColor : "rgba(72,174,209,0.4)",
            data : [364,504,605,400,345,320]
        }

    ]
};

var income = document.getElementById("income").getContext("2d");

new Chart(income).Bar(barData, {
  animation:false,
  scaleOverride:true,
  scaleSteps:9,
  scaleStartValue:0,
  scaleStepWidth:100
});

12👍

var myChart = new Chart(ctx, {
                type: 'bar',
                data:data,
                options: {
                    responsive: true,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 6,
                                max: 60 //max value for the chart is 60
                                }
                            }
                        }]
                    }
                }
            });

1👍

@2.8.0
custom y-axis setup. You only need range min/max and with stepSize you control the axis.

...
yAxes: [{
        ticks: {
            stepSize: 0.1,
            min: 2,
            max: 2.5
            },
        gridLines: {
            display: false 
            },
        stacked: false
                    }]
 ...

0👍

For those who struggle with react-chartjs-2:

Example that starts from 0, makes 2 steps each of size 20 and goes up to max

let options = {
  scales: {
    y: {
      ticks: {
        beginAtZero: true,
        steps: 2,
        stepSize: 20,
        max: 40
      }
    }
  }
}

Usage:

// ... your component structure
return <Line options={options} />

Leave a comment