score:178
i had the same problem, i think in chart.js 2.x.x the approach is slightly different like below.
ticks: {
callback: function(label, index, labels) {
return label/1000+'k';
}
}
more in details
var options = {
scales: {
yaxes: [
{
ticks: {
callback: function(label, index, labels) {
return label/1000+'k';
}
},
scalelabel: {
display: true,
labelstring: '1k = 1000'
}
}
]
}
}
score:2
here you can find a good example of how to format y-axis value.
also, you can use scalelabel : "<%=value%>"
that you mentioned, it basically means that everything between <%=
and %>
tags will be treated as javascript code (i.e you can use if
statments...)
score:5
as nevercom said the scalelable should contain javascript so to manipulate the y value just apply the required formatting.
note the the value is a string.
var options = {
scalelabel : "<%= value + ' + two = ' + (number(value) + 2) %>"
};
if you wish to set a manual y scale you can use scaleoverride
var options = {
scalelabel : "<%= value + ' + two = ' + (number(value) + 2) %>",
scaleoverride: true,
scalesteps: 10,
scalestepwidth: 10,
scalestartvalue: 0
};
score:7
for anyone using 3.x.x
, here's the updated syntax to change y axis labels:
scales: {
y: {
ticks: {
callback: (label) => `$ ${label}`,
},
},
},
score:9
chart.js 2.x.x
i know this post is old. but if anyone is looking for more flexible solution, here it is
var options = {
scales: {
yaxes: [{
ticks: {
beginatzero: true,
callback: function(label, index, labels) {
return intl.numberformat().format(label);
// 1,350
return intl.numberformat('hi', {
style: 'currency', currency: 'inr', minimumfractiondigits: 0,
}).format(label).replace(/^(\d+)/, '$1 ');
// ₹ 1,350
// return intl.numberformat('hi', {
style: 'currency', currency: 'inr', currencydisplay: 'symbol', minimumfractiondigits: 2
}).format(label).replace(/^(\d+)/, '$1 ');
// ₹ 1,350.00
}
}
}]
}
}
'hi' is hindi. check here for other locales argument
https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/intl#locale_identification_and_negotiation#locales_argument
for more currency symbol
https://www.currency-iso.org/en/home/tables/table-a1.html
score:14
scalelabel : "<%= number(value).tofixed(2).replace('.', ',') + ' $'%>"
score:56
an undocumented feature of the chartjs library is that if you pass in a function instead of a string, it will use your function to render the y-axis's scalelabel.
so while, "<%= number(value).tofixed(2).replace('.',',') + ' $' %>"
works, you could also do:
scalelabel: function (valuepayload) {
return number(valuepayload.value).tofixed(2).replace('.',',') + '$';
}
if you're doing anything remotely complicated, i'd recommend doing this instead.
Source: stackoverflow.com
Related Query
- Chart.js Chart Formatting - Legend & Y Axis & Title
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- In Chart.js set chart title, name of x axis and y axis?
- Chart.js - Formatting Y axis
- Charts.js Formatting Y Axis with both Currency and Thousands Separator
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chart Js change text label orientation on Ox axis
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js 2.0 Formatting Y Axis with Currency and Thousands Separator
- show label in tooltip but not in x axis for chartjs line chart
- y axis Formatting with Metric prefix 1000=> 1k Chart.js
- Chart JS - set start of week for x axis time series
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.js Timeseries chart - formatting and missing data values
- Chart.js Dynamically Updating Chart with X Axis Time
- How do I change the 'months' language displayed on the date axis in Chart JS?
- Obtain max value of y axis of line chart rendered with Chart.js
- Changing x axis labels in Chart.js line chart
- Line chart with large number of labels on X axis
- chart.js switch x/y axis on line chart
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chart js different background for y axis
- Map event position to y axis value in chartjs line chart
- Show all values in Chart js y axis
- Chart Js, Style some ticks on the axis differently
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- Hovering over chart.js values in Meteor onRendered function causes chart axis shift
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- to increase space between x axis and first horizontal bar in chart js
- Add buffer to Y axis with chart js
More Query from same tag
- How to change the fontFamily of the labels and remove the grid in chart.js
- Chart.js rotating x-axis text labels
- Resizing chart before downloading as image
- ChartJS plotting x/y in a line chart
- chart.js remove lower grid from mixed chart
- How to remove a vertical line from the canvas of react-chartjs-2?
- Extend bar chart on Chart JS 2 into a new type of Chart
- Multiple usage of Javascript function
- Need some Help Regarding Chart.js
- Chart.js how to remove final label on chart
- Using lodash to prepare data for "last day user registration" chart
- How to ignore same values on ChartJs?
- Extend chart.js horizontal bar graph to include a vertical line
- chartjs align origin of the axis to the corner of graph
- Custom tooltip callback on one dataset (chartjs v 2.5)
- Adding images/icons to specific coordinates in chart.js
- chart.js chart failing to render
- How to render tooltip text on a different div with Chart.JS
- Coding within labels and datasets table from chart.js
- Prevent label of another data from being toggled whenever a label from one data is toggled
- ChartJS zoom/pan onPan event not firing in React useEffect hook
- How to align multiple x axes in chart.js?
- Make Chart.js ToolTip different then data
- Chart.js Stacked Group Bar model after updating version Chart.js 2.9.4 -> Chart.js 3.5.0
- Removing text shadow/blur from chart.js charts
- math.max() doesn't work in IE
- Specify varying thickness of each bar in Chart.js bar chart
- Is it possible to generate multiple chart in Laravel using chartjs ? If possible please give the solution
- npm chart.js is big after minimization
- How to pass a array from node to .js file (pugJs)