title: how to set labeloffset dynamically in chart Js
body: <p>I am using Chart.js, I have to generate stack bar chart based on fromMonth to toMonth selection.</p>
  <p>My bar chart option is:</p>
  <pre><code>{
    &quot;chartCanvasHeight&quot;: &quot;200&quot;,
    &quot;chartOptions&quot;: {
      &quot;responsive&quot;: &quot;true&quot;,
      &quot;tooltips&quot;: {
        &quot;mode&quot;: &quot;nearest&quot;,
        &quot;callbacks&quot;: {
          &quot;label&quot;: null,
          &quot;title&quot;: {}
        }
      },
      &quot;legend&quot;: {
        &quot;position&quot;: &quot;bottom&quot;,
        &quot;labels&quot;: {
          &quot;generateLabels&quot;: {}
        }
      },
      &quot;scales&quot;: {
        &quot;yAxes&quot;: [{
          &quot;ticks&quot;: {
            &quot;beginAtZero&quot;: &quot;true&quot;,
            &quot;callback&quot;: {}
          },
          &quot;scaleLabel&quot;: {
            &quot;display&quot;: true,
            &quot;labelString&quot;: &quot;&quot;
          }
        }],
        &quot;xAxes&quot;: [{
            &quot;id&quot;: &quot;xAxis1&quot;,
            &quot;type&quot;: &quot;category&quot;,
            &quot;ticks&quot;: {
              &quot;display&quot;: false
            }
          },
          {
            &quot;id&quot;: &quot;xAxis2&quot;,
            &quot;type&quot;: &quot;linear&quot;,
            &quot;offset&quot;: true,
            &quot;ticks&quot;: {
              &quot;max&quot;: 12,
              &quot;beginAtZero&quot;: true,
              &quot;stepSize&quot;: 0.5,
              &quot;callback&quot;: {}
            },
            &quot;gridLines&quot;: {
              &quot;offsetGridLines&quot;: true,
              &quot;color&quot;: &quot;white&quot;,
              &quot;zeroLineColor&quot;: &quot;white&quot;
            }
          },
          {
            &quot;id&quot;: &quot;xAxis3&quot;,
            &quot;type&quot;: &quot;linear&quot;,
            &quot;ticks&quot;: {
              &quot;beginAtZero&quot;: false,
              &quot;max&quot;: 12,
              &quot;stepSize&quot;: 1,
              &quot;callback&quot;: {}
            },
            &quot;gridLines&quot;: {}
          },
          {
            &quot;id&quot;: &quot;xAxis4&quot;,
            &quot;ticks&quot;: {
              &quot;display&quot;: false
            },
            &quot;scaleLabel&quot;: {
              &quot;display&quot;: true,
              &quot;labelString&quot;: &quot;&quot;
            },
            &quot;gridLines&quot;: {
              &quot;zeroLineColor&quot;: &quot;white&quot;,
              &quot;color&quot;: &quot;white&quot;,
              &quot;drawOnChartArea&quot;: false
            }
          }
        ]
      },
      &quot;plugins&quot;: {
        &quot;datalabels&quot;: {
          &quot;align&quot;: &quot;top&quot;,
          &quot;anchor&quot;: &quot;end&quot;,
          &quot;textAlign&quot;: &quot;center&quot;
        },
        &quot;afterDatasetsDraw&quot;: {}
      }
    },
    &quot;chartDataSets&quot;: [],
    &quot;chartLabels&quot;: [],
    &quot;chartType&quot;: &quot;bar&quot;
  }
  </code></pre>
  <p>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.</p>
  <p><code>drawOnChartArea</code> is also not working.
  Last stork is also not coming on months x-axis.</p>
  <p><a href="https://i.stack.imgur.com/LnhUh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LnhUh.png" alt="enter image description here" /></a></p>