Как использовать метки данных плагина Chart.js с ng2-chart?

Что ж, вот и я снова столкнулся со своими проблемами с Angular и javascript, которые кажутся глупыми после каждого вопроса, который я задаю.

Но позвольте мне попытаться объяснить свои первые шаги и то, как они привели к этой проблеме. Итак, в моем последнем проекте я хотел добавить несколько причудливых диаграмм, чтобы сделать вещи более понятными и доступными для пользователя. На ум пришел Chart.js ... или, лучше сказать, ng2-charts.

Вещи были персиковыми, все выглядело красиво, но ... у меня было две проблемы. На горизонтальной полосе я хотел динамически изменять размер диаграммы, чтобы пользователю не приходилось прокручивать в течение непонятного промежутка времени, чтобы перейти по странице. Так что вместо этого неповоротливого зверя ...

Я пытаюсь применить магию Angular. Позже я хочу рассчитать его размер на моем сервере. На данный момент подойдет статическое значение.

@ViewChild('inventoryChart') itemChart : ElementRef;

constructor(public renderer: Renderer2) { }

ngAfterViewInit() {
   this.renderer.setStyle(this.itemChart.nativeElement, 'height', '230px')
}

Что приводит к...

Хороший. Но моя вторая проблема оказалась намного сложнее, чем я предполагал. Я хотел, чтобы диаграммы имели соответствующие значения на каждой столбчатой ​​диаграмме. Я был несколько шокирован, узнав, что это была не врожденная функция chart.js, а плагин. Поэтому я попытался сузить круг своих проблем, посмотрев на конфигурацию моей диаграммы.

@ViewChild('itemChart') itemChart : ElementRef;

  //public context: CanvasRenderingContext2D;

  public chartType: string = 'horizontalBar';

  chartDatalabel: ChartLabel;

  public chartDatasets: Array<any> = [
    { data: [28, 20, 6, 5, 3], label: 'Inventory per country' }
  ];

  public chartLabels: Array<any> = ['DEU', 'SVK', 'FRA', 'GBR', 'AUT'];

  public chartColors: Array<any> = [
    {
      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,
        },
      }]
    },
  };

Поскольку у меня был аналогичный вопрос, и, просмотрев документацию ... мне потребуется диаграмма для регистрации плагина.

Я добавил

import { Chart } from 'chart.js';

Но быстро понял, что я не знаю, как на самом деле получить этот экземпляр диаграммы, который я создавал в своем компоненте. И как я могу добавить это в опцию только для этой конкретной диаграммы? Я не нашел много источников с похожей проблемой (что заставило меня почувствовать себя еще более неумелым ...).

Есть ли какой-нибудь чистый "угловой" способ добавить этот плагин в ng2-charts?

РЕДАКТИРОВАТЬ: Судя по документации, я мог определить, что может делать плагин, следующими способами ...

var plugin = { /* plugin implementation */ };

А затем вызывая этот плагин в настройках графика или глобально ...

Chart.plugins.register({
    // plugin implementation
});

Чего бы я хотел избежать. Никогда не фанат глобальной настройки, если только это не абсолютно необходимо и не экономит время.

EDIT2: Sorta отказалась от регистрации в глобальном масштабе, но это все равно не очень помогает. Я добавил к своему импорту ...

import { Chart } from 'chart.js';
import * as ChartLabel from 'chartjs-plugin-datalabels';

А потом попытался зарегистрировать плагин в глобальной диаграмме.

  ngOnInit() {
    Chart.plugins.register(ChartLabel);
  }

Который, насколько я могу судить, "кое-что" сделал. Итак, я попытался реализовать очень простую реализацию плагина. Другие всплывающие подсказки больше не работают, но они вызывают ошибку, только когда я нахожу курсор на панели.

plugins: {
  datalabels: {
    color: 'white',
    display: true,
    font: {
      weight: 'bold'
    },
    formatter: Math.round
  }
},

Понятия не имею, что я могу сделать больше ...