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
- Multiple data sets not working when using ChartJS
- Removing chart on click event produces 'removeHoverStyle' of null error
- Chart.js - Multiple Doughnut Charts on same Canvas
- Showing 'undefined%' in the graph if data does not exist
- Chart.js, changing the max height (not w/ canvas) or rounding up rule?
- How to change z-index of chart js tooltip?
- Chart.js stacked bar ordering depending on value
- Data not displaying properly in Chart.js line chart
- how does this javascript recolor the doghnut?
- How To Add Center-Text in Donut Chart Js
- Format Chart.JS Data Element To Be Currency
- ChartJs - set background color of the space between ticks
- Charts.js v2: always show custom (html) tooltips on chart
- Legends for line charts in Chart.js
- How to create a line chart indicating which month a user wrote more or less blogs?
- dynamically update the scale type of chartjs graph
- Output array of hashes from Ruby on Rails to chart.js
- Using Variable in labels Chart.js of map Array
- Displaying data from simple html form to display in chartjs
- yAxis labels are being cut off in ngEchars (Echarts)
- I would like to rotate yAxes scaleLabel in Angular Chart.js
- Chart in other module
- what are the differences between 'NgChartModule' and 'chartModues'?
- Chart.js :set yAxis point to 0 when there is gap between two dates
- chart js when hover shows old values
- ChartJS canvas not displaying colors in edge browser
- ChartJS: Grouped Stacked Bar Chart not Grouping
- Unregister plugin in Chart.js
- How to label x-Axis in Chart.js by days?
- chart.js with JSON Data on Same page not displaying