Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Axis won't use decimal point values for scaling #5392

Closed
serratedserenade opened this issue Apr 5, 2018 · 5 comments
Closed

Axis won't use decimal point values for scaling #5392

serratedserenade opened this issue Apr 5, 2018 · 5 comments
Milestone

Comments

@serratedserenade
Copy link

serratedserenade commented Apr 5, 2018

Hey guys, I want to make the y axis ticks be in the step size of the max value (e.g. if the max value is 10, the ticks are 0, 2.5, 5, 7.5, 10). However it's rounding up and I'm not sure how to prevent that. Option used:

Expected Behavior

Steps to have decimal values: [0, 2.5, 5, 7.5, 10]

Current Behavior

Steps get rounded up to : [0, 3, 5, 8, 10].

Steps to Reproduce (for bugs)

  1. Make sample chart with any data and use the following scale option: scales: { yAxes: [{ ticks: { min: 0, max: 10, stepSize: 2.5, display: true, beginAtZero: true } }] }

Context

I want to be able to set the step size to any value I want and be able to scale properly. Currently when it automatically rounds up, it looks off and it's not the result I want anyway.

Environment

  • Chart.js version: 2.6
  • Browser name and version: Nodejs 9
@etimberg
Copy link
Member

etimberg commented Apr 5, 2018

@serratedserenade its likely the format function that is removing the decimal place. You could try a custom format function that uses a fixed number of decimal places and see if that changes things

@serratedserenade
Copy link
Author

I tried to use that and it didn't really solve the issue, the callback property passes 3 properties, all of which have already been calculated:

Code:

let chartNode = new chartjs(500,225);
  await chartNode.drawChart({
    "type": "line",
    "data": {
      labels: week,
      datasets: [
        {
          label: '',
          data,
          fill: false,
          borderColor: 'red',
        }
      ]
    },
    "options": {
      legend: {
        display: false,
      },
      scales: {
        yAxes: [{
          ticks: {
            min: 0,
            max: 10,
            stepSize: 10 / 4,
            callback: (value, index, values) => {
              console.log(value, values);
              return value;
            },
          }
        }]
      }
    }
  });

Result:

node index.js
10
10 [ 10, 8, 5, 3, 0 ]
8 [ 10, 8, 5, 3, 0 ]
5 [ 10, 8, 5, 3, 0 ]
3 [ 10, 8, 5, 3, 0 ]
0 [ 10, 8, 5, 3, 0 ]
10 [ 10, 8, 5, 3, 0 ]
8 [ 10, 8, 5, 3, 0 ]
5 [ 10, 8, 5, 3, 0 ]
3 [ 10, 8, 5, 3, 0 ]
0 [ 10, 8, 5, 3, 0 ]
10 [ 10, 8, 5, 3, 0 ]
8 [ 10, 8, 5, 3, 0 ]
5 [ 10, 8, 5, 3, 0 ]
3 [ 10, 8, 5, 3, 0 ]
0 [ 10, 8, 5, 3, 0 ]

@etimberg etimberg added this to the Version 2.8 milestone Apr 7, 2018
@V-Mario
Copy link

V-Mario commented Jul 18, 2018

+1

@nagix
Copy link
Contributor

nagix commented Aug 22, 2018

This is resolved by #4841. Set ticks.precision to 1.

@nagix
Copy link
Contributor

nagix commented Oct 24, 2018

This was not fixed in #4841 because ticks.precision is effective only if stepSize is not specified. I created a new PR #5786.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants