I am using Chart.js.
I want to make my chart legend label font size more bigger.
So I tried like this:
var ctx = $('#skill_chart');
new Chart(ctx,{
"type":"radar",
"data": {
"labels":["Crawling","Django","Ubuntu Server","Coding","Cycling","Running"],
"datasets":[{
"label":"My Second Dataset",
"data":[28,48,40,19,96,27,100],
"fill":true,
"backgroundColor":"rgba(54, 162, 235, 0.2)",
"borderColor":"rgb(54, 162, 235)",
"pointBackgroundColor":"rgb(54, 162, 235)",
"pointBorderColor":"#fff",
"pointHoverBackgroundColor":"#fff",
"pointHoverBorderColor":"rgb(54, 162, 235)"}]
},
"options":{
"elements":{
"line":{
"tension":0,
"borderWidth":3}
}
},
"legend": {
"display": true,
"labels": {
"fontSize": 20,
}
},
});
But It doesn't work. What should I do?
Your legend
object is outside the options
object. It needs to be within the options
object. The following code will work:
var ctx = $('#skill_chart');
new Chart(ctx,{
"type":"radar",
"data": {
"labels":["Crawling","Django","Ubuntu Server","Coding","Cycling","Running"],
"datasets":[{
"label":"My Second Dataset",
"data":[28,48,40,19,96,27,100],
"fill":true,
"backgroundColor":"rgba(54, 162, 235, 0.2)",
"borderColor":"rgb(54, 162, 235)",
"pointBackgroundColor":"rgb(54, 162, 235)",
"pointBorderColor":"#fff",
"pointHoverBackgroundColor":"#fff",
"pointHoverBorderColor":"rgb(54, 162, 235)"}]
},
"options":{
"elements":{
"line":{
"tension":0,
"borderWidth":3
}
},
"legend": {
"display": true,
"labels": {
"fontSize": 20,
}
},
}
});
Here is a link to the docs for fonts: https://www.chartjs.org/docs/latest/general/fonts.html
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments