Chartjs-plugin-datalabels: TypeScript definition for dataset and plugin options

[Laroosta]

Hi,

I'm currently getting typing errors when adding datalabels to a dataset, which is then preventing the app to compile.

If I manually add the datalabels properties in the @types/chart.js file, it works fine, but this is not a proper solutions, as one should not add specific properties to the chart.js typings library for a plugin.

For now I had to duplicate the chart.js typings and add them as a typeRoots to the project. This means that the typings need to maintained locally.

Does anyone know how this problem can be solved? Is it not possible to extend the chart.js typings and add the plugin specific properties?

[simonbrunel]

@Laroosta can you share a minimal project that reproduces this issue and instructions to build it?

[Laroosta]

@simonbrunel sure, here is a test project:
https://bitbucket.org/laroosta/chartjs-plugin-datalabels-problem/src/master/

npm i -g ionic
cd to folder:
npm i
ionic serve

Let me know if you have any issues getting the project going.

Thanks in advance!

[simonbrunel]

@Laroosta Thanks!

I will take a look to add a TypeScript definition for this project (inside this repository) but it may take a while to get it in and released. In the meantime, I think you can create a minimal definition file to prevent compilation errors, for example:

/src/pages/homes/chartjs-plugin-datalabels.d.ts:

declare module 'chart.js' {
    interface ChartDataSets {
        datalabels?: any
    }
}

/src/pages/homes/home.ts:

///<reference path="chartjs-plugin-datalabels.d.ts" />
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
// ...

[Laroosta]

Hi Simon,

Thank you so much for taking the time to respond. I will use your
suggestion until the typing definitions get updated.

Kind regards
Leroux

On Sun, 16 Dec 2018, 14:22 Simon Brunel <[email protected] wrote:

@Laroosta https://github.com/Laroosta Thanks!

I will take a look to add a TypeScript definition for this project (inside
this repository) but it may take a while to get it in and released. In the
meantime, I think you can create a minimal definition file to prevent
compilation errors, for example:

/src/pages/homes/chartjs-plugin-datalabels.d.ts:

import { ChartDataSets } from "chart.js"
declare module 'chart.js' {
interface ChartDataSets {
datalabels?: any
}
}

/src/pages/homes/home.ts:

///import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";// ...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/chartjs/chartjs-plugin-datalabels/issues/105#issuecomment-447638923,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMilW7gRHgD26SQj5Qcwg6fwAchaaPofks5u5jsHgaJpZM4ZTj0T
.

[simonbrunel]

TypeScript definition files added in 9e0026597a618f7ab1b07f04c75bc6395f96bbf6, will be released in v0.6.0

[RiQuY]

This would be very useful, is the v0.6.0 far from be released?
If yes, do you know a way to apply this to a project on TypeScript that I'm working on before v0.6.0 release?

EDIT: Would this be added to https://github.com/DefinitelyTyped/DefinitelyTyped/ like @types/chartjs-plugin-datalabels to be able to import it in TypeScript like: import { ChartDataLabels } from 'chartjs-plugin-datalabels';?

[simonbrunel]

v0.6.0 is about to be released (probably this week)

do you know a way to apply this to a project on TypeScript that I'm working on before v0.6.0 release?

No, I don't (I don't use TypeScript myself)

Would this be added to DefinitelyTyped ... ?

I don't think so because it will conflict with the one in this repository.

[simonbrunel]

Version 0.6.0 has been released.