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
- Chart.js doughnut animate/draw clockwise
- How do I draw horizontal bars with a label using either ChartJS or D3?
- Is it possible to merge duplicate labels (and their datas) into one column in Chart Js?
- Any way to make the y-axis border longer in chart.js?
- Display values in Pareto chart using Chart.js 2.0.2
- Unable to parse color in line chart (angular-chart.js)
- How to align bars in bar chart - Chart.js
- Javascript : ""Uncaught TypeError: Cannot read property 'x' of undefined"" in canvasjs.min.js
- How to make multiple horizontal bar chartjs
- Chart.js - Bar values showing on the middle of bar
- Chart.js canvas, how can I swap data without the previous data affecting my hover events?
- Chartjs Graph is not showing in colorbox
- using react js to create a website that could read .csv file and show in chartjs
- Chart.js Line Chart x-Axes label rounding
- Email a chartjs graph in laravel
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- Creat Chart Bar using ChartJS
- ChartJS Unix Time Values changed
- How to create a bar and a line in a same graph using chart.js in React?
- [MIXED CHART.JS]How do I manipulate the label of each chart's tooltips?
- Highlight date in Chart.js line graph
- Connecting Two Datasets in Chart.js Into a Single Line
- Chart.js v3: Tooltip callback doesn't identify clicked dataset of stacked bar chart
- Chart.js: bad alignment of label during ajax update
- Chart JS - Horizontal Bar Chart Not Filling Canvas
- How to add text inside scatter plot using Chart.js?
- Chart JS V3 Tooltip styling location changed?
- Chart.js -> Displaying % on pie chart
- I want to add label on only specific vue chart
- How to highlight a section of a stack in all bars in a stacked barchart in chartjs