'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.

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source