score:270
in chart.js version 2.0, it is possible to set labels for axes:
options = {
scales: {
yaxes: [{
scalelabel: {
display: true,
labelstring: 'probability'
}
}]
}
}
see labelling documentation for more details.
score:0
<scatter
data={data}
// style={{ width: "50%", height: "50%" }}
options={{
scales: {
yaxes: [
{
scalelabel: {
display: true,
labelstring: "probability",
},
},
],
xaxes: [
{
scalelabel: {
display: true,
labelstring: "hours",
},
},
],
},
}}
/>
score:0
see example with name of x axis and y axis left and right.
public barchartoptions: chartoptions = {
title: {
display: true,
text: 'custom chart title',
},
responsive: true,
legend: {
position: 'right',
},
scales: {
yaxes: [
{
position: 'right',
scalelabel: {
display: true,
labelstring: 'frequency rate - right',
},
},
{
position: 'left',
scalelabel: {
display: true,
labelstring: 'frequency rate - left',
},
},
],
xaxes: [
{
display: true,
position: 'bottom',
scalelabel: {
display: true,
labelstring: 'titulo do eixo x',
fontstyle: 'italic',
fontsize: 12,
fontcolor: '#030',
},
},
],
},
};
score:6
in chart js 3.5.x, it seems to me the title of axes shall be set as follows (example for x axis, title = 'seconds'):
options: {
scales: {x: { title: { display: true, text: 'seconds' }}}
}
see: https://www.chartjs.org/docs/latest/axes/labelling.html
score:7
just use this:
<script>
var ctx = document.getelementbyid("mychart").getcontext('2d');
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: ["1","2","3","4","5","6","7","8","9","10","11",],
datasets: [{
label: 'your label',
backgroundcolor: [
"#566573",
"#99a3a4",
"#dc7633",
"#f5b041",
"#f7dc6f",
"#82e0aa",
"#73c6b6",
"#5dade2",
"#a569bd",
"#ec7063",
"#a5754a"
],
data: [12, 19, 3, 17, 28, 24, 7, 2,4,14,6],
},]
},
//here comes the axis y label
options : {
scales: {
yaxes: [{
scalelabel: {
display: true,
labelstring: 'probability'
}
}]
}
}
});
</script>
score:11
for readers in 2021:
version
"chart.js": "^3.3.2",
real world working sample:
const optionstemplate = (yaxistitle, xaxistitle) => {
return {
scales: {
yaxes: {
title: {
display: true,
text: yaxistitle,
font: {
size: 15
}
},
ticks: {
precision: 0
}
},
xaxes: {
title: {
display: true,
text: xaxistitle,
font: {
size: 15
}
}
}
},
plugins: {
legend: {
display: false,
}
}
}
}
score:16
if you have already set labels for your axis like how @andyhasit and @marcus mentioned, and would like to change it at a later time, then you can try this:
chart.options.scales.yaxes[ 0 ].scalelabel.labelstring = "new label";
full config for reference:
var chartconfig = {
type: 'line',
data: {
datasets: [ {
label: 'defaultlabel',
backgroundcolor: '#ff0000',
bordercolor: '#ff0000',
fill: false,
data: [],
} ]
},
options: {
responsive: true,
scales: {
xaxes: [ {
type: 'time',
display: true,
scalelabel: {
display: true,
labelstring: 'date'
},
ticks: {
major: {
fontstyle: 'bold',
fontcolor: '#ff0000'
}
}
} ],
yaxes: [ {
display: true,
scalelabel: {
display: true,
labelstring: 'value'
}
} ]
}
}
};
score:24
for chart.js version 3
options = {
scales: {
y: [{
title: {
display: true,
text: 'your title'
}
}]
}
}
Source: stackoverflow.com
Related Query
- In Chart.js set chart title, name of x axis and y axis?
- How do you set x and y axis and Title for a line chart using charts.js?
- How to set 3 axis in google chart (V-Axis Left as Qty, V-Axis Right as Series Column and H-Axis as TimeOrder)?
- 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
- Set minimum and maximum axis values on chart
- How to set max and min value for Y axis
- ChartJS: How to set fixed Y axis max and min
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- 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
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chart js: how can I align the legend and the title
- to increase space between x axis and first horizontal bar in chart js
- ng2-charts: How to set Title of chart dynamically in typescript
- Chartjs - Set start and end value into a Bar Chart
- How to set the xAxes min and max values of time cartesian chart in Chart.js
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- why the main and axis title does not show in chart.js
- Chart.js Chart Formatting - Legend & Y Axis & Title
- Unable to set width and height on canvas in chart js
- chartkick chart.js change colour of axis and colour of axis title
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- How to set and adjust plots with equal axis aspect ratios - CHART.js
- How to set min max for x axis depend on data with Chartjs and Spring Boot?
- X and Y axis labels not displaying on line chart (Chart.js)
- Move chart x axis label and borders
- Chart.js bar chart with time on X axis and category on Y axis is not rendered
- Rails dual axis using Chartkick and chart js
- Chart.js 2.9.4 - howto set a margin for axes min\max and time axis label separation
More Query from same tag
- show name on yaxis in chart.js
- chart.js: How do I make the radar chart axis labels bigger?
- Chart.js chart flickering when re-opening page
- Angular ChartJs colors option not working
- Looping variables or array
- How to draw multiple color bar in a bar chart using chart.js
- Chart.js different scaleLine color of radar chart (angular)
- Angular how to display data inside every part of doughnut chartjs
- is there a way to do automatic scrolling?
- Creat Chart Bar using ChartJS
- custom filter charts in chart.js
- Reference to the previous element in the array - in Javascript
- Displaying custom dataset properties in tooltip in chart.js
- unable to pass data from views to js file having chart js codes, shows unexpected syntax error
- How to resize chartjs in bootstrap columns for different browsers
- Using Chart.js in functional React component, not allowing me to toggle data: "properties undefined"
- ChartJs line chart repaint glitch while hovering over
- How to display value of only one datapoint in line chart
- Convert/transpose one array into another in JavaScript?
- Get method in php then pass the value into json format
- Set fixed label size for grouped bar chart in angular Chartjs
- How can I hide tick marks on Chart.js?
- ChartJS TypeError: document.getElementById(...).getContext is not a function
- Why is this "not defined"
- Is it possible to combine two Y axes into a single tooltip with ChartJS 2?
- Chart JS - How to output JSON objects into PIE variant
- Chart.js not showing in Android 8.0/Android O
- chart.js Line chart with different background colors for each section
- how to change radius in rg-gauge-chart in Angular
- ChartJS Bar chart with time scale - Bars overlap with each other