Chartist-js: Decimals in axis values

[olivierlesnicki]

I have a dataset composed of only integers, but ChartistJS displays decimals axis values. Is there an option to set the smallest possible step to always be an integer instead of being a decimal?

[willsoto]

If I understand you correctly, you probably are looking for:

labelInterpolationFnc: function (value) {
    // do whatever math operation you want here
    return Math.floor(value);
}

In the object graph you pass chartist, both axisX and axisY have this possible key, value pair.

[olivierlesnicki]

My bad, I hadn't reviewed the documentation correctly!

[gionkunz]

Hey guys, I'm re-opening this issue because this will not solve your problem. The label interpolation is only interpolating the displayed value and what you're looking for is something that changes the values of the scales so that the step value should be integer. This change would need to be an option that can be passed to the getBounds method where it would effect this part: https://github.com/gionkunz/chartist-js/blob/develop/source/scripts/chartist.core.js#L285-L305

I'm sorry but by using labelInterpolationFnc you can only change how the label looks like atm. I'm changing the title of this issue a bit to something more generic.

Cheers
Gion

[gionkunz]

Maybe we can just after the step optimization loop check for an option and if set (let's say options.scaleNoFractions: true) we could ceil the step value and walk up value by value to find a fraction of bounds.range ?

[olivierlesnicki]

What about a minStep/maxStep set of options?

[gionkunz]

Yeah that'd be possible too. Let's think about it a bit more. I think min / max for step option also brings it's problems.

[gionkunz]

Currently, if the initial step calculated from orderOfMagnitute is greater than options.axisY.scaleMinSpace, Chartist.js is dividing step by two until the space between between the horizontal grid lines is below what's specified in options.axisY.scaleMinSpace (actually one before it reaches that). The other way is when initial step is less than options.axisY.scaleMinSpace where it will be scaled up by multiplication with 2 until it's greater than options.axisY.scaleMinSpace. So in both cases it's a option to ensure a minimum space that needs to be available but the rest is up to the algorithm to optimize the scale. And optimization currently means to show as many grid lines as possible (without violating the rule to go below the options.axisY.scaleMinSpace).

If we'd limit scaleMaxSpace we'd need to consider the follow:

• What's the priority? Being more close to min or more close to max?
• You could set options.axisY.scaleMinSpace to options.axisY.scaleMaxSpace for enforcing a given scale step value but it needs to be a fraction of the whole range, otherwise you will end up in many odd cases you don't want to end up.
• What do you do when there is no step value that is a fraction of bounds.range between min and max? Do you exceed the max value because you don't want to go down any further?

For me personally there are already too many things that are unclear with that approach. I think I'd stick to the current algorithm but using an option onlyWholeNumbers or scaleNoFractions or something to indicate the algorithm should search the first whole number fraction starting from the optimized step value.

Please tell me if you have something else in mind.
Cheers
Gion

[sakujo]

Hi there!
Is there anyway to swap start and end value on y axis?
I want value 1 to be my max and value 4 to be my min. Like this:
1
2
3
4
1 2 3...
I dont want the y axis to have 0 either.

[gionkunz]

There is no option to switch the y axis direction. However, as a workaround, you could use negative values so -1 is your max and -4 is your min and your data goes from -1 to -4. Then use the options:

{
  axisY: {
    labelInterpolationFnc: function(value) {
      return Math.abs(value);
    }
  }
}

[sakujo]

K got it. Just used return value * -1 and tadaaa axis values are positive even though i have negative values in my array. I used your suggestion of course!! Thank you very much!!
Solved..

[gionkunz]

You could either preprocess your data to narrow it down to max -1 and min -4, or you limit the display of your values so that values outside your range are not displayed using the low and high configuration:

{
  low: -4,
  high: -1
}

[sakujo]

That's a nice option. Ty. My mistake was, that i had some values above -4 (e.g. -4,7) thus the y axis showed values i didnt want to xD.

[olivierlesnicki]

Not sure this issue belongs to this ticket.

[sakujo]

i dunno if this can work for chartist.js too but im using something like this on another chart lib:

var max = -4;
var step = 1;
var start = -1;

scaleOverride: true, // so i can override default behaviour
scaleSteps: Math.ceil((start-max)/step),
//Math.ceil() Round a number upward to it's nearest integer: Math.ceil(1.4) The result will be: 2
scaleStepWidth: step,
scaleStartValue: max

In the example above the steps are always integers due to the ceil() function. You may just need the ceil() function...

[gionkunz]

@olivierlesnicki your correct. @sakujo, please open a new ticket on any open questions and reference this one for any further discussions.

[gionkunz]

@sakujo, chartist does not support a fixed step atm. Maybe that's also an option and would definitely address this issue.

[voidale]

Any update on this one? onlyWholeNumbers will be great, I got only 5,2,6,8,10 numbers but scale shows 1, 2.50, 3, 5, 7.50 etc I want to get rid of decimals! It's very weird for my chart which is orders (can't have 2.5 orders lol)

[nilsi]

I have the same situation as @voidale. I only have integer values from 0-10. But my y-axis displays decimals.

[mikeaag]

Hi, just wanted to add that i'm experiencing this as well. Exactly the same situation as @nilsi, y-axis goes from 0-10, and i would like it to be only integers. Cheers :octopus:

[ghost]

If you want only integer values from the ones calculated by Chartist to be displayed, maybe a workaround is this one:
var options = {
axisY: {
labelInterpolationFnc: function(value) {
return ( value % 1 === 0 ) ? value : '';
}
}
}

[ilanbiala]

@gionkunz this should probably be postponed to 0.7.0 or something further down, no?

[gionkunz]

@ilanbiala right ;-)

[ilanbiala]

Just ran into this issue, hoping to see if it can either be built in as an option to Chartist or a detailed example is given.

[ilanbiala]

@gionkunz has there been any progress on this issue? What about adding a step property that says what the increment should be, and what about integerOnly to say whether an axis should be integer only or not?

[danieldiekmeier]

I'd also like to see this solved! <3

[fluffabelle]

I would also really like a fix for this. I am using chartist to re-create already client-approved excel charts or illustrator files into online versions (a charting plugin is ideal for accessibility and maintainability). Currently, I am not able to have my charts match the approved reference file, which I can already foresee being an issue. I would love to be able to set a min or max (or both) and a value of increment (this would require some math to set all three on the users part), ex: 1, 10, 0.5. Alternatively, Adobe Illustrator solves this by a min and max input, and the number of steps/divisions. While this method works, I personally find it very confusing as I'm not sure if the min and max count as division points and thus it is a bit of trial and error and math re-working to get nice numbers. The suggestion of onlyWholeNumbers or scaleNoFractions would work in a lot of cases, however some of my charts use decimals as data. If decimals are the data points, the Y axis would have to show decimals... but I would prefer 0.25, 0.5, 0.75 over 0.37, 0.74, 1.11, etc which is why I am suggesting a step increment. I am curious if any one else has the need to customize the Y Axis to the extent that I do and would also find this a useful solution?

[gionkunz]

I'm adding this to the 0.8 milestone.

[pfilipow]

I've found living with the built-in the step value but only returning integers on the display is good enough for my use-cases, if it helps anyone else.

labelInterpolationFnc: function(value) {
   // If value is numeric, only return integers
   return (isNaN(value) || value % 1 == 0 ) ? value : ' ';  //returning a space still draws grid lines
},  

[Aaronik]

Also would love to see this feature built. Being able to specify the y axis step values are critical to anyone seriously using charts!

[rjcrystal]

@pfilipow nice idea. can be used for now :+1:

[gionkunz]

I've added the option onlyInteger to the axis configurations. First there will be a check if a projected step of 1 is still larger than scaleMinSpace. Then the smallest integer factor of the whole range will be calculated with Pollard Rho factorization and again checked if the projected value is larger than scaleMinSpace. If none of the two approaches leads to a step size, then division by two will be used to determine the ideal step size, but division will stop if it leads to fractions.

1 step value and smallest factor are working nicely on charts with a value range from 1 to 100 where regular division by 2 works nice for charts with value ranges of 100+

[gionkunz]

This will be released soon with the 0.8 release I'm planning later today.

[Aaronik]

:)