score:33
For Chart.js 2.x refer to andyhasit's answer - https://stackoverflow.com/a/36954319/360067
For Chart.js 1.x, you can tweak the options and extend the chart type to do this, like so
Chart.types.Line.extend({
name: "LineAlt",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var ctx = this.chart.ctx;
ctx.save();
// text alignment and color
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
ctx.fillStyle = this.options.scaleFontColor;
// position
var x = this.scale.xScalePaddingLeft * 0.4;
var y = this.chart.height / 2;
// change origin
ctx.translate(x, y);
// rotate text
ctx.rotate(-90 * Math.PI / 180);
ctx.fillText(this.datasets[0].label, 0, 0);
ctx.restore();
}
});
calling it like this
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).LineAlt(data, {
// make enough space on the right side of the graph
scaleLabel: " <%=value%>"
});
Notice the space preceding the label value, this gives us space to write the y axis label without messing around with too much of Chart.js internals
Fiddle - http://jsfiddle.net/wyox23ga/
score:3
Consider using a the transform: rotate(-90deg) style on an element. See http://www.w3schools.com/cssref/css3_pr_transform.asp
Example, In your css
.verticaltext_content {
position: relative;
transform: rotate(-90deg);
right:90px; //These three positions need adjusting
bottom:150px; //based on your actual chart size
width:200px;
}
Add a space fudge factor to the Y Axis scale so the text has room to render in your javascript.
scaleLabel: " <%=value%>"
Then in your html after your chart canvas put something like...
<div class="text-center verticaltext_content">Y Axis Label</div>
It is not the most elegant solution, but worked well when I had a few layers between the html and the chart code (using angular-chart and not wanting to change any source code).
score:6
For me it works like this:
options : {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}]
}
}
score:12
For Chart.js 3.x
options: {
scales: {
y: {
title: {
display: true,
text: 'Y axis title'
}
}
}
}
score:13
chart.js supports this by defaul check the link. chartjs
you can set the label in the options attribute.
options object looks like this.
options = {
scales: {
yAxes: [
{
id: 'y-axis-1',
display: true,
position: 'left',
ticks: {
callback: function(value, index, values) {
return value + "%";
}
},
scaleLabel:{
display: true,
labelString: 'Average Personal Income',
fontColor: "#546372"
}
}
]
}
};
score:22
For x and y axes:
options : {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'hola'
}
}],
}
}
score:187
In Chart.js version 2.0 this is possible:
options = {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}]
}
}
See axes labelling documentation for more details.
Source: stackoverflow.com
Related Query
- How to set ChartJS Y axis title?
- How to set ChartJS x-axis title
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to set ChartJS Axis label with PrimeFaces
- How do you set x and y axis and Title for a line chart using charts.js?
- How to set min max for x axis depend on data with Chartjs and Spring Boot?
- How to set min Value a step down of min value received from database in Y Axis in ChartJS
- How to set subscript text in Chart.js axis title
- How to set max and min value for Y axis
- ChartJS: How to set fixed Y axis max and min
- chartjs : how to set custom scale in bar chart
- ng2-charts: How to set fixed range for y axis
- Chartjs 2.7.3: Set Y data at the correct X position axis
- How do I fix over limit y axis value in ChartJS
- How to set a full length background color for each bar in chartjs bar
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- How to customize Title position with ChartJS
- how to set title in legend of chart.js?
- Chart.js How to change y axis title position
- How to dynamically set ChartJs line chart width based on dataset size?
- How to add ChartJS code in Html2Pdf to view image
- ChartJS How to set max labels for X axis?
- ng2-charts: How to set Title of chart dynamically in typescript
- how to set color for each item in tooltip with ChartJS
- chartjs - how to set the order in which the different charts are displayed
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- How to draw multiple line on y axis for same x axis in chartjs v2?
- How to set max smaller than min in ChartJS
- How to set a borderWidth on ChartJS - AngularJS?
- How to set the chartjs bar graph scale to the highest value in the result data
More Query from same tag
- Chart.js multiple datasets on one y axis
- Vertical Punchcard with chartjs
- Run Chartjs Dart example
- How can I display desired/particular chart in App.vue from Charts.vue which contains different charts in Vuejs
- chart.js TypeError: item is null
- TimeSeries scale in ChartJS 3.0.2. brings error "This method is not implemented: either no adapter can be found or an incomplete integration was ..."
- chart js how do I only show just the low/high dots on line chart?
- chart js : how to display title or lable?
- how to remove old data from Chart js on mouse hover using mvc c#?
- Syntax to instantiate chart.js chart
- Missing colors in my Chart.js, my data looks fine, but no color
- Chartjs - How to update the data from values in my database?
- Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization
- Show 'No data' in Pie when there is no data using VueJS and ChartJS?
- Border behind grid line
- how to group the chart
- Drawing chart.js with external JSON
- how do i use the numbers i key in from a form as the input data for chartjs
- Image-Chart ChartJs Ticks Callback not Working?
- Charts.js graph with multiple Y Axes
- Chart.js legend alignment left side
- Make labels of ChartJS radar in a few rows
- chart.js onClick event function, access angular component
- Ajax reload data chat.js showing error on mouse hover on graph
- chart js: when all the values passed to data are zeros, nothing is showing
- React passing a variable object to setState vs. an anonymous object to setState
- ChartJS dataset onclick deselect the rest
- Chart js: Update line chart having two data sets
- Execute onClick function on Custom Legend
- Angular 6 with chart.js TypeError: item is null