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
- How to remove Chart.js legend
- trouble with making floating bar charts using chart.js
- I cant get Legend to work for my chartjs donut chart
- Using Google Analytics raw data to display graph by month
- Chart.js: hiding series by clicking on legend
- ChartJs bar chart bar value displaying lower then Y axis value in pdf?
- Chart.js - Creating Custom Chart Types
- How to customize percentage label in Doughnutchart ng2 chart.js
- Is there a way to add html markup to target each column individually in Chartjs/Canvasjs?
- chartjs - no smooth rendering on time series plot
- Set Chart Background Image - Chart.js
- chart.js bar chart x-axis label disappeared
- chart.js version 3 - How to make an overlapping bar chart?
- Laravel - How to Display both count and percentage (%) in chartjs pie chart
- Custom Legend with ChartJS v2.0
- Order and hide items of legend by value with Chartjs Angular
- chart.js: Place tooltip for stacked bar charts on top of bar
- Chartjs: Multiple data values for the same label
- Parse HTML input value to php over javascript file
- Graphing the timestamp and data from mysql
- Parsing webserver JSON Values to data property
- Chart JS distance between bar stacked
- How can I use an array of {x,y} objects to make a chart?
- Return 0 as data for months with no data
- ChartJs different data for Tooltips
- How do I create a legend for a bar chart?
- Cannot get react-chartjs to update
- Chart does not display on webpage in Django app (with Chart.js)
- Chart.js 3.5: linear gradient doesn't apply properly when multiple bars in the same chart
- Chart.js 2.6.0 options / scales / xAxis / gridLines doesn't work for me?