'how to set labeloffset dynamically in chart Js
I am using Chart.js, I have to generate stack bar chart based on fromMonth to toMonth selection.
My bar chart option is:
{
"chartCanvasHeight": "200",
"chartOptions": {
"responsive": "true",
"tooltips": {
"mode": "nearest",
"callbacks": {
"label": null,
"title": {}
}
},
"legend": {
"position": "bottom",
"labels": {
"generateLabels": {}
}
},
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": "true",
"callback": {}
},
"scaleLabel": {
"display": true,
"labelString": ""
}
}],
"xAxes": [{
"id": "xAxis1",
"type": "category",
"ticks": {
"display": false
}
},
{
"id": "xAxis2",
"type": "linear",
"offset": true,
"ticks": {
"max": 12,
"beginAtZero": true,
"stepSize": 0.5,
"callback": {}
},
"gridLines": {
"offsetGridLines": true,
"color": "white",
"zeroLineColor": "white"
}
},
{
"id": "xAxis3",
"type": "linear",
"ticks": {
"beginAtZero": false,
"max": 12,
"stepSize": 1,
"callback": {}
},
"gridLines": {}
},
{
"id": "xAxis4",
"ticks": {
"display": false
},
"scaleLabel": {
"display": true,
"labelString": ""
},
"gridLines": {
"zeroLineColor": "white",
"color": "white",
"drawOnChartArea": false
}
}
]
},
"plugins": {
"datalabels": {
"align": "top",
"anchor": "end",
"textAlign": "center"
},
"afterDatasetsDraw": {}
}
},
"chartDataSets": [],
"chartLabels": [],
"chartType": "bar"
}
everything is coming but labels are not center aligned as months could be between Jan to Dec. how to center align both x-axis label or labeloffset dynamically.
drawOnChartArea
is also not working.
Last stork is also not coming on months x-axis.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|