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 2.0 Formatting Y Axis with Currency and Thousands Separator
- Chart.js don't show the first time
- chartjs stepSize by 5
- Highlight doughnut segment on mouseenter generateLegend Chartjs 2
- How to set static labels for ng2-charts bar charts?
- Use multiple datasets with Javascript Chart
- Chart.js: How to handle very large and very small values in radar chart?
- Angular 12 Chart.js - Cannot display doughnut
- Google Chart and Chart.Js, Send C# variable to Script side in Asp .NET Core 2.2
- ChartJs chart in typescript: Object is possibly undefined in useEffect
- Meteor with Chart js cannot read property ‘getContext’ of null only AFTER new document in collection?
- How can I trigger the hover mode from outside the chart with charts.js 2?
- Chart.js not drawing on mobile (safari/chrome) fine on desktop
- Limit numbers of labels on Chart.js in "smaller display only"
- How to fill remaining polar area with color
- How we can draw a circle in bar chart
- How can I get two stacked chart.js charts to be different types?
- ChartJS How to set max labels for X axis?
- Updating data in chart.js
- Load more historical data in Line charts on panning left
- ChartJS not work in .php loaded by jquery .load() (AJAX)
- Line Chart Labels - Ng2Charts - ChartJS
- ChartJS - Line Chart with different size datasets
- Vue watch not noticing changes on component prop
- How do I remove cartesian axes from chart js?
- zingchart heatmap not show all hours on y axes
- Chart.js canvas cuts off doughnut stroke
- Chart.js - barchart - plugin labels
- How can i do so that my chartjs updates everytime data is inserted or by time interval?
- Make the X-Axis labels in chart.js increment by a certain scale