score:11
Accepted answer
to do what you want, i just added a js object in your code :
for version 2.x, yaxes
labels are actually stored in the options
of the chart, and not its data
as you did.
if you take a look at the docs, you'll see that you have to edit the callback
attributes of the ticks in options.scales.yaxes
.
to do what you want, i just added a js object in your code :
// replace the value with what you actually want for a specific key
var ylabels = {
0 : 'newb', 2 : 'codecademy', 4 : 'code-school', 6 : 'bootcamp', 8 : 'junior-dev',
10 : 'mid-level', 12 : 'senior-dev', 14 : 'full-stack-dev', 16 : 'famous-speaker',
18 : 'unicorn', 20 : 'harambe'
}
and then in the callback
:
options: {
scales: {
yaxes: [{
ticks: {
callback: function(value, index, values) {
// for a value (tick) equals to 8
return ylabels[value];
// 'junior-dev' will be returned instead and displayed on your chart
}
}
}]
}
}
take a look at this jsfiddle for the result.
Source: stackoverflow.com
Related Query
- How to change the Y-axis values from numbers to strings in Chart.js?
- Change the Y-axis values from real numbers to integers in Chart.js
- how to change the Y-axis values from float number to integer in chartjs?
- How do I change the 'months' language displayed on the date axis in Chart JS?
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- ChartJs 2 How to remove numbers from the doughnut chart on loading
- How to remove the extra Y axis from a bar chart in chart.js
- How to stop displaying the data values from different data objects on Chart JS 2.x?
- How to start Y Axis Line at 0 from right for negative values in chart js 2?
- How do I stop chart js from auto rescaling the y axis upon calling chart.update()?
- In chart.js how can I change the x axis on my line \chart from January-December to October-September? Basically, fiscal year instead of calendar year
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- How can I trigger the hover mode from outside the chart with charts.js 2?
- How to commaize the data values provided to a chart in Chart.JS?
- How to create a chart that uses strings for both the X and Y axes?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- chart is not getting updated from the values it received from Jquery
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- How to Remove axis Lines from chart in chart js
- how can i send a list of numbers from views.py to a chartjs file im using for the front?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- How can I add a unit to the end of my Y Axis values in ChartJS?
- angular-chart.js doughnut chart : How do I change width of the arc of a doughnut?
- How can I have different values for the chart and the tooltip in chart.js?
- chart.js: How do I make the radar chart axis labels bigger?
- How to change the chart line or area colors according to the user need?
- How to stop axis label from being cut off in chart JS?
- How to change background color of labels in line chart from chart.js?
- How to set the xAxes min and max values of time cartesian chart in Chart.js
More Query from same tag
- Accessing data from the callback function of a bar chart using chart js
- Dashboard grid - Chart.JS and CSS- issue widening two small horizontal bar graphs - noob question
- How can I change the background colors of a bar chart after it has been created?
- Pass function elements to render in js
- Chart.js unwanted canvas resizing
- Unwanted comma in the tooltips when line breaking a label in ChartsJS
- Angular 8 & ChartJs change color in pie chart
- How to write with good practice?
- Angular and ChartJS to create bar chart
- Canvas width/height not updating on internet explorer
- Chart.js barchart custom on hover method
- Chart JS title passed from Django - issue with apostrophe '
- charts.js and timestamp as readable date
- React Js and Chart Js (Line Chart)
- ChartJS tooltip values aren't matching the data after updating multiple charts
- Is it possible to shorten outer labels on Radar graph using Chart.js, without affecting the other labels?
- How can I make streaming chart with react?
- ChartJS glitches
- Is it possible to set top border on ChartJS Doughnut Gauge chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Charts are overlapping with old values on mouse hover
- How to change font size of labeled scales in Chart.js?
- How to add commas in thousands and to show decimal upto 2 places on X/Y axis in Angular chat JS?
- How to add an extra tick on top of the highest bar in Chart.js v2.9.4 (grace)?
- Remove Chart.js chart padding
- Chart.js label and point getting cutoff on the right
- HTML Canvas Fill Area Under Line
- Chart.js not showing correctly/install issues
- Hide legends in Chartjs
- How to resolve npm error needing an appropriate loader?