title: Chart.js, increase space between bars and its labels when increasing the charts width
body: <p>I´m currently testing the ChartType <code>bar</code> form Chart.js.</p>
  
  <p>Thats how i defined the test canvas:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="bar-chart"&gt;
    &lt;canvas
      baseChart
      [datasets]="[{label: 'Testuser1', data: [0, 15, 0, 0]}, {label: 'Testuser2', data: [10, 0, 10, 0]}, {label: 'Testuser3', data: [15, 0, 0, 12]}]"
      [labels]="['Junior Softwaredeveloper', 'Senior Softwaredeveloper', 'Designer']" [chartType]="barChartType"
      [options]="options"&gt;
    &lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The options im using:</p>
  
  <pre><code>export const CHARTOPTIONS_BAR = {
    legend: {display: false},
    animation: null,
    tooltips: {
      callbacks: {
        label: (tooltipItems, data) =&gt; data.datasets[tooltipItems.datasetIndex].label + ': ' + data.datasets[tooltipItems.datasetIndex].data[0] + 'h'
      },
    },
    plugins: {
      colorschemes: {
        scheme: 'tableau.SuperfishelStone10',
        override: true
      }
    },
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'Stunden',
          fontSize: 18
        }
      }]
    },
    responsive: true
  };
  </code></pre>
  
  <p>And the parent class just defines the width and height to which the canvas responsively adapts to:</p>
  
  <pre><code>.bar-chart {
    width: 400px;
    height: 200px;
  }
  </code></pre>
  
  <p>Thats how it looks:</p>
  
  <p><a href="https://i.stack.imgur.com/4kGfo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4kGfo.png" alt="enter image description here"></a></p>
  
  <p>I would like to increase the width of the chart, so theres enough space for longer text like <code>Junior Softwaredeveloper</code> to fit in(horizontally).</p>
  
  <p>But if i increase the width from 400px to 800px i get this:</p>
  
  <p><a href="https://i.stack.imgur.com/trqdN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/trqdN.png" alt="enter image description here"></a></p>
  
  <p>So it scales up the aspect ratio of everything which results in a blurred image. Is there a way to increase the width of the chart which then causes the space between the bars to increase, but keep the aspect ratio of the text, bar etc. the same?</p>
  
  <p>I basically just want everything to be like in the above image. Just double the width without it affecting the aspect ratio of the elements. Doubling the width should just double the space between the bars and its labels which would help me to fit in longer text horizontally.</p>