I am currently migrating our application using an old version of chart-js but at the moment I am a bit lost.
NB : The old project was made with vuejs 2 and now we are using nuxt3 rc11
By reading the documentation on the migration, many things have changed and I have trouble finding my way around: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html
Here is what the parameters I send to chart-js look like
{
"type":"doughnut",
"data":{
"labels":[
"",
"",
"",
""
],
"datasets":[
{
"data":[
16,
0,
0,
1
],
"backgroundColor":[
"#00CBA1",
"#FFBF00",
"#FF406C",
"#4C49AF"
],
"borderWidth":"transparent"
}
]
},
"plugins":[
],
"options":{
"hover":{
"mode":"index",
"axis":"y"
},
"legend":{
"display":false
},
"scales":{
"x":{
"gridLines":{
"display":false
},
"ticks":{
"padding":10,
"display":false
}
},
"y":{
"ticks":{
"beginAtZero":true,
"padding":20,
"display":false
},
"gridLines":{
"drawBorder":false,
"color":"#E3E3E3",
"zeroLineColor":"#E3E3E3",
"display":false
}
}
},
"tooltip":{
"enabled":false
},
"maintainAspectRatio":true,
"responsive":true,
"tooltips":{
},
"layout":{
"padding":{
"top":10,
"right":10
}
},
"cutoutPercentage":60
}
}
I don't know what is wrong with this actualy because my canvas display empty cells like this
I thank you in advance for your clarification
