Question

170

Chart.js automatic chosen scale value

rated 0 times [ 174] [ 4] / answers: 1 / hits: 17106 / 7 Years ago, fri, august 4, 2017, 12:00:00

I am using automatic scale starting value. It will generate and chose min and max number in y axis automatically. Now i am facing problem, The scale start exactly from the min number and will be finish exactly from the max number. Can i set the scale to start before the min number like 2% of the value? This is my chart:

I just want to notice that i have random values, so i can not adjust the scale to start and end certain values!
Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayla

Add To Favorites

Follow

Total Points: 681

Total Questions: 102

Total Answers: 108

Location: Marshall Islands

Member since Tue, Sep 21, 2021

3 Years ago

tayla questions

1 Problem embedding tiktok video into angular 7

Fri, Mar 5, 21, 00:00, 3 Years ago

1 Lodash - How to merge two arrays of objects based on key?

Wed, Oct 28, 20, 00:00, 4 Years ago

1 Horizontal scroll bar is appearing after using slick slider in the webpage

Wed, Oct 21, 20, 00:00, 4 Years ago

1 Jest: `querySelector` returns null in test of a ReactJS component

Sat, Jul 4, 20, 00:00, 4 Years ago

1 setTimeout with Promises

Thu, Apr 9, 20, 00:00, 4 Years ago

View All

answered 7 Years ago megb · Accepted Answer

You can use min and max property of y-axis ticks, to set a minimum (start) and maximum (end) scale value respectively.

scales: {

   yAxes: [{

      ticks: {

         min: Math.min.apply(this, data_array) - 5,

         max: Math.max.apply(this, data_array) + 5

      }

   }]

}

ᴅᴇᴍᴏ

var data_array = [20, 22, 24, 28, 30];



var chart = new Chart(ctx, {

   type: 'bar',

   data: {

      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],

      datasets: [{

         label: 'BAR',

         data: data_array,

         backgroundColor: 'rgba(0, 119, 290, 0.5)',

         borderColor: 'rgba(0, 119, 290, 0.6)'

      }]

   },

   options: {

      scales: {

         yAxes: [{

            ticks: {

               min: Math.min.apply(this, data_array) - 5,

               max: Math.max.apply(this, data_array) + 5,

               stepSize: 5

            }

         }]

      }

   }

});

<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js></script>

<canvas id=ctx></canvas>