CODEWITHSUNDEEP
javascriptchart.js
Baldie47
Baldie47

Reputation: 1264

change axis scale to be round numbers instead of decimal - chart.js

I'm working with chart.js and I can't seem to be able to change the scale of the Y axis to show whole numbers, in this example I would like to have just round numbers in the scale (1,2,3,4,5) instad of the decimal (0 -0,5 - 1,0 - 1,5 - 2,0 - etc)

enter image description here

I'm using a vertical Bar chart from here: https://www.chartjs.org/docs/latest/samples/bar/vertical.html

and my current setup is this:

var setVirtualBarChart = function (element, viewModel) {
    var chArea = element.getContext("2d");
    var chartConfig = {
        type: 'bar',
        data: {
            labels: ['Categories'],
            datasets: [
                {
                    minBarLength: 2,
                    label: '0-7 days',
                    barPercentage: 0.75,
                    categoryPercentage: 0.75,
                    data: viewModel.ZeroToSevenDaysUser(),
                    backgroundColor: window.chartColors.BrightVisibleGreen
                },
                {
                    minBarLength: 2,
                    label: '8-30 days',
                    barPercentage: 0.75,
                    categoryPercentage: 0.75,
                    data: viewModel.SevenToThirtyDaysUser(),
                    backgroundColor: window.chartColors.Orange
                },
                {
                    minBarLength: 2,
                    label: '30+ test days',
                    barPercentage: 0.75,
                    categoryPercentage: 0.75,
                    data: viewModel.ThirtyPlusDaysUser(),
                    backgroundColor: window.chartColors.BrightRed
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                xAxes: [
                    {
                        stacked: false,
                        display: true,
                        scaleLabel: {
                            display: true,
                            //labelString: 'Categories',
                            gridLines: {
                                offsetGridLines: true
                            }
                        }
                    }
                ],
                yAxes: [
                    {
                        stacked: false,
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Number of invoices'
                        },
                        ticks: {
                            precision: 0,
                            min: 0
                        }
                    }
                ]
            }
        }
    };

    VirtualBarChart = new Chart(chArea, chartConfig);
};

Upvotes: 0

Views: 2489

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31371

You are using v2 syntax while using v3, in v3 all scales are objects and no arrays anymore. For all changes please read the migration guide

Exaple:

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
      label: '# of Votes',
      data: [1, 2.5, 1.5],
      backgroundColor: ["Red", "Blue", "Yellow"]
    }]
  },
  options: {
    scales: {
      y: {
        ticks: {
          stepSize: 1
        },
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

Upvotes: 2

Related Questions