title: chart js showing different width of bar
body: <p>I am creating simple bar chart using Chartjs in Vue</p>
  <pre><code>&lt;bar-chart
              :data=&quot;[40, 19, 3, 5,]&quot;
              :labels=&quot;['0-30 days', '31-60 days', '61-90 days', '90+']&quot;
              :colors=&quot;['blue', 'blue', 'blue', 'blue']&quot;
              
              &gt;&lt;/bar-chart&gt;
  </code></pre>
  <p>and the code for this is</p>
  <pre><code> 
    createChart(chartData: object) {
    
      const canvas = document.getElementById('bar') as HTMLCanvasElement;
   const myopt = {
        deferred: {
          xOffset: '50%',
          delay: 250,
        },
        plugins: {
          datalabels: {
            align: 'top',
            anchor: 'end',
            color: 'blue',
          },
        },
        legend: {
          display: true,
        },
        title: {
          display: true,
          text: 'Chart.js - Different Bar Colors',
        },
        tooltips: { enabled: true },
        responsive: true,
        hover: { mode: null },
        elements: {
          point: {
            radius: 0,
          },
        },
        scales: {
          xAxes: [{          
            scaleLabel: {
              display: true,
              labelString: '',
            },   
            offset: false,
            color: 'rgba(0, 0, 0, 0)',        
            gridLines: {
              drawOnChartArea: false,
            },
          }],
  
          yAxes: [{
            id: 'y-axis-0',
            mirror: false,
            stacked: true,
            offset: false,
            callback(label:any, index:any, labels:[]) {
              return `${label}%`;
            },
            ticks: {
              beginAtZero: true,
              min: 0,
            },
            gridLines: {
              display: true,
              color: 'rgba(0, 0, 0, 0)',
              drawOnChartArea: false,
            },
          }],
        },
      };
      const options = {
        type: 'bar',
        data: chartData,
        options: myopt,
      };
      new Chart(canvas, options);
    }
  </code></pre>
  <p>the chart which this is generating is not equidistant  sharing image for reference
  <a href="https://i.stack.imgur.com/BJvaq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BJvaq.png" alt="Notice position and width of the bar" /></a></p>
  <p>position and width of the bar is incorrect and also I want to know if there is any way by which i can customize labels for y axis e.g. instead of <strong>40,35,30...</strong> it will be ** 40k,35k,30k** in y axis</p>
  <p>If any one has worked on this case please help</p>