-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Configurable axis title location #5218
Comments
Tagging as an enhancement because this is not currently possible |
@zedsimple @etimberg I think you can use |
@phongpt156 |
@phongpt156
|
Added file for adding axes labels chartjs#5218
Added method for providing label for the axes chartjs#5218
For anyone wanting this, you can use a custom plugin to achieve this: const customTitle = {
id: 'customTitle',
beforeLayout: (chart, args, opts) => {
if (!opts.x.display) {
return;
}
const {
ctx
} = chart;
ctx.font = opts.x.font || '12px "Helvetica Neue", Helvetica, Arial, sans-serif'
const {
width
} = ctx.measureText(opts.x.text);
chart.options.layout.padding.right = width * 1.3;
},
afterDraw: (chart, args, opts) => {
const {
ctx,
scales: {
x,
y
},
chartArea: {
top,
bottom,
left,
right
}
} = chart;
if (opts.x.display) {
ctx.fillStyle = opts.x.color || Chart.defaults.color
ctx.font = opts.x.font || '12px "Helvetica Neue", Helvetica, Arial, sans-serif'
ctx.fillText(opts.x.text, (right + (opts.x.offsetX || 0)), (bottom + ((opts.x.offsetY * -1) || 0)))
}
if (opts.y.display) {
ctx.fillStyle = opts.y.color || Chart.defaults.color
ctx.font = opts.y.font || '12px "Helvetica Neue", Helvetica, Arial, sans-serif'
ctx.fillText(opts.y.text, opts.y.offsetX || 3, (top + ((opts.y.offsetY * -1) || -15)))
}
}
}
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
layout: {
padding: {
right: 0 // Seems nesesarry cuz otherwise padding wont update
}
},
plugins: {
customTitle: {
y: {
display: true,
text: 'Numbers'
},
x: {
display: true,
text: 'Month',
offsetX: 5,
offsetY: 5,
font: '12px Comic Sans MS'
}
}
}
},
plugins: [customTitle]
} |
After reading document, i don't found any options to add title to X and Y coordinate like image
![image](https://user-images.githubusercontent.com/21080919/35660297-d0a1cc60-073d-11e8-9cf5-3c65aa978483.png)
See title "Month" and "Percent"
The text was updated successfully, but these errors were encountered: