compilation problem in Angular

I used versions 5.0.0-beat and 4.0.0 respectively, it works but I am getting the following compilation error from webpackserver: error TS2322: Type '{ legend: { display: false; }; title: { display: true; text: string; }; labels: { fontColor: string; fontStyle: string; fontSize: number; position: string; }; }' is not assignable to type '_DeepPartialObject<PluginOptionsByType<"pie">>'. Object literal may only specify known properties, and 'labels' does not exist in type '_DeepPartialObject<PluginOptionsByType<"pie">>'.

labels: { fontColor: '#000', position: 'border', }

Any ideas?

Here is my code:

import {ActiveElement,/ Chart, /ChartEvent, registerables} from 'chart.js'; import {ClosedAlertsGraphData, OpenAlertsGraphData} from './open-alerts-graph-data.model'; import {Router} from '@angular/router'; import {OpenAlertsGraphService} from "./open-alerts-graph.service"; import {GraphTypes, OpenAlerts} from '../../../main/open-alerts/open-alerts.model'; import Chart from 'chart.js/auto'; import { getChartLabelPlugin, PLUGIN_ID} from 'chart.js-plugin-labels-dv';

const canvasElmnt = this.elementRef.nativeElement.querySelector('canvas[name="openAlertsCanvas"]'); Chart.register(getChartLabelPlugin()); const router = this.router; const closedAlertsData = data; const product = this.product; Chart.defaults.font.size = 12; console.log("them 1: " + Chart.registry?.plugins.get(PLUGIN_ID));

    this.chart = new Chart(canvasElmnt, {
        type: 'pie',
        data: closedAlertsData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: 'Chart.js Pie Chart',
                },
                labels: {
                    fontColor: '#000',
                    fontStyle: 'bold',
                    fontSize: 12,
                    position: 'border',
                }
            },
            onClick(event: ChartEvent, elements: ActiveElement[], chart: Chart) {
                if (elements.length > 0) {
                    const selectedDataset = closedAlertsData.datasets[elements[0].datasetIndex];
                    const activeElementIdx = elements[0].index;
                    const selectedAlertIds = selectedDataset.alertIds[activeElementIdx];
                    void router.navigate(['/alerts', product.toLowerCase(), 'list', 'Live'], {
                        queryParams: { alertsFilter: `id+in+${selectedAlertIds.join(',')}` }
                    });
                }
            }
        }
    });

DavideViolante / chartjs-plugin-labels

compilation problem in Angular #28