title: How to use Chart.js plugin data-labels with ng2-chart?
body: <p>Well, here I am again with my Angular and javascript woes feeling dumber for each question I ask. </p>
  
  <p>But let me try to explain my initial steps and how it lead to this problem. So, in my latest project, I wanted to throw some fancy charts to make things cleaner and more approachable for the user. Chart.js came to mind... or I should say, ng2-charts. </p>
  
  <p>Things were peachy, stuff looked nice, but... I had two problems. On a horizontal bar, I wanted to dynamically alter the size of the chart, so the user didn't have to scroll for an obscure amount of time to get down the page. So instead of this unwieldy beast...</p>
  
  <p><a href="https://i.stack.imgur.com/oXFvy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oXFvy.png" alt="Yeah... we don&#39;t want."></a></p>
  
  <p>I try to apply some Angular magic. Later on I want to calculate the size of it on my backend end. For now, a static value shall do. </p>
  
  <pre><code>@ViewChild('inventoryChart') itemChart : ElementRef;
  
  constructor(public renderer: Renderer2) { }
  
  ngAfterViewInit() {
     this.renderer.setStyle(this.itemChart.nativeElement, 'height', '230px')
  }
  </code></pre>
  
  <p>Which leads to...</p>
  
  <p><a href="https://i.stack.imgur.com/Ht9jO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ht9jO.png" alt="enter image description here"></a></p>
  
  <p>Nice. <strong>But my second problem was a lot harder than I assumed it to be</strong>. I wanted the charts to have the respective values on each bar chart. I was somewhat shocked to learn, that it wasn't an innate feature of chart.js but a plugin instead. So I tried to narrow down my problems I had by looking at my chart configuration. </p>
  
  <pre><code>@ViewChild('itemChart') itemChart : ElementRef;
  
    //public context: CanvasRenderingContext2D;
  
    public chartType: string = 'horizontalBar';
  
    chartDatalabel: ChartLabel;
  
    public chartDatasets: Array&lt;any&gt; = [
      { data: [28, 20, 6, 5, 3], label: 'Inventory per country' }
    ];
  
    public chartLabels: Array&lt;any&gt; = ['DEU', 'SVK', 'FRA', 'GBR', 'AUT'];
  
    public chartColors: Array&lt;any&gt; = [
      {
        backgroundColor: '#0E599A',
        pointBackgroundColor: 'rgba(220,220,220,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(220,220,220,1)'
      },
    ];
  
    public chartOptions: any = {
      responsive: true,
      maintainAspectRatio: false,
  
      scales: {
        yAxes: [{
          barPercentage: .9,
          categoryPercentage: .9,
  
          gridLines: {
            offsetGridLines: true,
            display: true,
          },
          ticks: {
            beginAtZero: true
          } 
        }], 
        xAxes: [{
          ticks: {
            beginAtZero: true, 
            min: 0
          },
          gridLines: {
            offsetGridLines: true,
            display: true,
          },
        }]
      },
    };
  </code></pre>
  
  <p>Since I had a similar question and by looking at the documentation... it would require the chart to register the plugin.</p>
  
  <p>So I added</p>
  
  <pre><code>import { Chart } from 'chart.js';
  </code></pre>
  
  <p>But quickly realized, I didn't know how to actually get this chart instance I was creating in my component. And how could I add this in the option for this specific chart only? I didn't find many sources with a similar problem to mine (which made me feel even more inept...).</p>
  
  <p>Is there any clean 'angular-way' to add this plugin in ng2-charts? </p>
  
  <p><strong>EDIT:</strong> Judging from the documentation, I could define what the plugin can do in the following ways...</p>
  
  <pre><code>var plugin = { /* plugin implementation */ };
  </code></pre>
  
  <p>And then calling this plugin in the options of the chart or globally... </p>
  
  <pre><code>Chart.plugins.register({
      // plugin implementation
  });
  </code></pre>
  
  <p>Which I would like to avoid. Never a fan of global configuration unless absolutely necessary and time-saving. </p>
  
  <p>EDIT2: Sorta gave up on NOT registering it globally, but it still doesn't help a whole lot. I added to my imports...</p>
  
  <pre><code>import { Chart } from 'chart.js';
  import * as ChartLabel from 'chartjs-plugin-datalabels';
  </code></pre>
  
  <p>And then tried to register the plugin in the global Chart.</p>
  
  <pre><code>  ngOnInit() {
      Chart.plugins.register(ChartLabel);
    }
  </code></pre>
  
  <p>Which has done 'something' as far as I can tell. So I attempted to do a very basic implementation of the plugin. The other tooltips don't work anymore but it only triggers an error when I hover around the bars.</p>
  
  <pre><code>plugins: {
    datalabels: {
      color: 'white',
      display: true,
      font: {
        weight: 'bold'
      },
      formatter: Math.round
    }
  },
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/gagHG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gagHG.png" alt="enter image description here"></a></p>
  
  <p>No clue what I can do anymore...</p>