score:141
Update: please see an updated answer from @DreamTeK
that shows how this can now be done as part of the chartjs api https://stackoverflow.com/a/54006487/2737978
in chartjs 2.x you can pass an option for a userCallback
to the yaxis tick field. In this you can check if the label is a whole number
here is an example
options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
userCallback: function(label, index, labels) {
// when the floored value is the same as the value we have a whole number
if (Math.floor(label) === label) {
return label;
}
},
}
}],
},
}
score:0
if your chartjs version above 2.8 you can easily use precision: 0
study the below example
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
position: 'top',
text: 'Monthly Establish Documents Value',
fontSize: 25
},
scales: {
xAxes: [
{
stacked: true,
scaleLabel: {
display: true,
labelString: 'Months'
}
}
],
yAxes: [
{
stacked: true,
beginAtZero: true,
id: 'A',
scaleLabel: {
display: true,
labelString: '$AUD'
}
},
{
stacked: false,
beginAtZero: true,
id: 'B',
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: '#Clients '
},
position: 'right',
ticks: {
min: 0,
precision: 0
}
}
]
}
} ```
score:0
Chart.js v3 (2022+)
The most reliable way with Chart.js v3 is not to use ticks.precision
, but instead provide your own formatter with ticks.callback
.
Example on how to format y axis labels:
scales: {
y: {
ticks: {
callback: (yValue) => {
return Math.floor(yValue); // format to your liking
},
},
},
}
Documentation: https://www.chartjs.org/docs/latest/samples/scale-options/ticks.html
score:1
You can yaxis optopn;
decimalsInFloat: Number
Number of fractions to display when there are floating values in y-axis. Note: If you have defined a custom formatter function in yaxis.labels.formatter, this won’t have any effect.
score:1
I use this:
yAxes: [
{
ticks: {
callback: function(val) {
return Number.isInteger(val) ? val : null;
}
}
}
]
Note: use the callback function for better granular control. We check if val is an integer instead of a floating-point decimal. If it is, we return the value. If not, we return null.
score:4
The easiest and most straight forward solution is to add these configurations to your options object:
scales: {
yAxes: [
{
ticks: {
precision: 0,
beginAtZero: true,
},
},
],
},
and define the Axes (In my case it is the yAxes) depending on your axes with fractions
score:22
You can adding stepSize and beginAtZero option like this:
scales: {
yAxes: [{
ticks: {
stepSize: 1,
beginAtZero: true,
},
}],
},
score:32
Another alternative is to use the fixedStepSize option as follows:
options = {
scales: {
yAxes: [{
ticks: {
fixedStepSize: 1
}
}],
},
};
score:87
2019 Update
This can now easily be achieved using the precision
option:
ticks: {
precision:0
}
As per the documentation.
If defined and stepSize is not specified, the step size will be rounded to this many decimal places.
EXAMPLE
options: {
scale: {
ticks: {
precision: 0
}
}
}
OR (Single Axis)
options: {
scales: {
xAxes: [{
ticks: {
precision: 0
}
}]
}
}
Source: stackoverflow.com
Related Query
- Skip decimal points on y-axis in chartJS
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- ChartJS set color of Line chart points depending on Y Axis
- Hide points in ChartJS LineGraph
- How to set ChartJS Y axis title?
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Adding Image inside Linechart points in ChartJs
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- ChartJS : How to leave just points without lines
- show label in tooltip but not in x axis for chartjs line chart
- Chartjs 2 scaling lots of data points
- Chartjs Line Color Between Two Points
- Chartjs change the specific label color in x axis in callback function
- Chartjs 2: Multi level/hierarchical category axis in chartjs
- ChartJS bar not showing up for simple data points
- Chartjs 2.7.3: Set Y data at the correct X position axis
- How do I fix over limit y axis value in ChartJS
- chartjs - Drawing vertical line on integer x axis value
- ChartJs line chart - display permanent icon above some data points with text on hover
- Map event position to y axis value in chartjs line chart
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Changing the Y axis unit in Chartjs
- Chartjs real time graph x axis movement
- Chartjs x axis scaling
- Chartjs change horizontal axis value
- How to make points in chartjs draggable?
- Add Commas to ChartJS Data Points
- ChartJS - handling of overlapping points in line chart
- How to add ChartJS code in Html2Pdf to view image
- chartjs - multi axis line chart - cannot read property 'min' of undefined
More Query from same tag
- Django and Chartjs template conflict
- Chart.js axes always show zero
- Download Chart.js graph from view
- Update chart in Chart js
- Chart.js charts not rendering data until I inspect element, is it because of async?
- Animate datasets separately
- How to get dataset from MySQL using Flask?
- How to place extra text on canvas (not using HTML) beside chart?
- jQuery - destroy and rebuild chart with original options
- chart.js different x axis and tooltip format
- Chart.js dynamically upating data using variable
- How to dynamically update data of line chart used with chart Js?
- How can i do so that my chartjs updates everytime data is inserted or by time interval?
- Sending data to ChartJsLineChart in ChartJs.Blazor
- Changing borderDash for specific gridLines in radar chart
- Chartjs tooltip anchor point position on bar charts
- Chartjs-plugin-zoom plugin does not change x axis labels
- How to change space between columns in horizontalBar in Chart.js?
- reveal.js with plotly.js and chart.js export pdf
- Chart.js doughnut chart comes bigger and bigger
- Chart.js mixed chart : Lines not starting at zero
- Angular 6: chartjs value not updating with dynamic value update
- chart is not getting updated from the values it received from Jquery
- Chartjs - Stacked bar chart data order causes invisible other values
- Update a chartjs by javascript function
- Example: Doughnut | Error: Uncaught ReferenceError: Utils is not defined
- Select All and Unselect Option for chart.js
- Calculate weighted sum over all points in chart.js
- Update ChartJS with MySQL Data
- Can't pass data to chart.js graph