title: Angular Chart.js / ng2-charts: horizontal bar with values next to the bar
body: <p>I want to have a horizontal bar chart in my Angular app (ng2-chart library) with the absolute value of the bar next to it. However, I'm having issues with displaying the value next to the bar. See the screenshot below, right now some of the text is <em>inside</em> the bar, which I don't want.</p>
  
  <p><a href="https://i.stack.imgur.com/RloVH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RloVH.png" alt="enter image description here"></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div style="padding: 10px;"&gt;
      &lt;canvas baseChart *ngIf="loaded"
              [data]="barChartData"
              [labels]="barChartLabels"
              [chartType]="barChartType"
              [options]="barChartOptions"
              [colors]="barChartColors"
              [legend]="barChartLegend"&gt;
      &lt;/canvas&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>TS</strong></p>
  
  <pre><code>  public barChartOptions: ChartOptions = {
      responsive: true,
      scales: {
        xAxes: [{
          display: false
        }],
        yAxes: [{
          gridLines: {
            display: false
          }
        }]
      },
      animation: {
        duration: 1000,
        onComplete: function () {
            var chartInstance = this.chart,
            ctx = chartInstance.ctx;
            ctx.fillStyle = "#666";
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
  
            this.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                console.log(meta)
                var canvasWidth = meta.controller.chart.width;
                meta.data.forEach(function (bar, index) {
                    var data = dataset.data[index];                            
                    ctx.fillText('€ ' + formatNumber(data, 'be', '1.2-2'), canvasWidth, bar._model.y);
                });
            });
        }
    }
    };
    public barChartData: SingleDataSet = [1234, 543, 2134, 124, 644, 1640, 2340];
    public barChartLabels: Label[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    public barChartType: ChartType = 'horizontalBar';
    public barChartLegend = false;
    public barChartColors: Color[] = [{ backgroundColor: 'rgb(31, 78, 120)' }]
  </code></pre>
  
  <p>I tried as well in the <code>ctx.fillText</code> to do <code>canvasWidth + 40</code>, in which case the text is completely next to the bar but it is rendered <em>outside</em> of the canvas:</p>
  
  <p><a href="https://i.stack.imgur.com/YBpzj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YBpzj.png" alt="enter image description here"></a></p>