I’m using java to build the following chart config and putting quickchart url into an image tag on my page with the result. I cannot seem to get the datalabels to render on my first data set when requesting from quickchart. The same config will render datalabels on my web page with the addition of top level: plugins: [ChartDataLabels] to config datalabels on my page. Any ideas what I may be doing wrong. I am calling quickchart with version 3 chart.js specified. I am running quickchart on a local docker image I just pulled down.
{
"data": {
"datasets": [
{
"backgroundColor": "rgb(176,219,164)",
"data": [
1712,
1789,
1863,
1929,
1690
],
"datalabels": {
"color": "black",
"display": true,
"font": {"weight": "bold"}
},
"label": "16+ Days",
"order": 2
},
{
"backgroundColor": "rgb(254,225,145)",
"data": [
708,
736,
772,
839,
739
],
"datalabels": {
"display": false,
"labels": {"title": null}
},
"label": "7-15 Days",
"order": 2
},
{
"backgroundColor": "rgb(243,184,148)",
"data": [
1129,
1316,
1206,
1242,
1227
],
"datalabels": {"labels": {"title": null}},
"label": "1-6 Days",
"order": 2
},
{
"backgroundColor": "rgb(232,66,88)",
"data": [
3549,
4515,
5051,
5538,
4088
],
"datalabels": {"labels": {"title": ""}},
"label": "0 Days",
"order": 2
},
{
"backgroundColor": "rgba(60,116,38,0.97)",
"borderColor": "rgba(60,116,38,0.97)",
"tension": "0.4",
"data": [
3549,
4178,
4446,
4774,
3872
],
"datalabels": {"labels": {"title": null}},
"label": "Top 25%",
"type": "line",
"cubicInterpolationMode": "monotone",
"order": "1"
}
],
"labels": [
"Jan-23",
"Mar-23",
"Apr-23",
"May-23",
"Feb-23"
]
},
"options": {
"plugins": {
"datalabels": {
"color": "black",
"font": {"weight": "bold"}
},
"title": {
"display": "true",
"text": "Total Number of Devices by Testing Days for All Devices"
}
},
"responsive": true,
"scales": {
"x": {"stacked": "true"},
"y": {"stacked": "true"}
},
"locale": "en-US"
},
"type": "bar"
}
