7👍
I would avoid to declare Chart like this.
Instead you can do import {Chart} from 'chart.js'
since it is a subdependency of ng2-charts anyway.
By this approach your IDE can still do autocompletion and you are not telling angular to just believe that there is something called Chart.
To be consistent you should also add it to your package.json.
4👍
Maybe follow this thread (https://github.com/valor-software/ng2-charts/issues/496) in case there becomes a more “official” way, but here is what I did:
At the top of your component:
declare var Chart: any;
That will stop TypeScript from complaining and give you access to the Chart object.
Then you can use:
Chart.pluginService.register
Here’s an example of code for a plugin that I was using:
https://github.com/chartjs/Chart.js/issues/78#issuecomment-220829079
Update (May 2018):
This answer is likely not valid or the best way to do this anymore.
1👍
for example drawing in center of doughnut chart i find workaround using it in options animation, so no need to refister a plugin
animation: {
onProgress: function(chart) {
let width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
let fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
ctx.fillStyle = '#dddddd';
let text = "75%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
},
onComplete: function(chart) {
let width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
let fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
ctx.fillStyle = '#dddddd';
let text = "75%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
},
},
- [Chartjs]-Ng2-charts: How to set fixed range for y axis
- [Chartjs]-Chart.js: bar chart first bar and last bar not displaying in full
0👍
This took me forever to figure out so adding what worked for me here in case anybody else struggles with this in Angular 2+:
app.module.ts:
import * as ChartLabels from 'chartjs-plugin-labels';
...
export class AppModule {
constructor() {
BaseChartDirective.unregisterPlugin(ChartLabels); // this makes chart plugins work in components
}
}
component.ts:
... // other imports
import * as ChartLabels from 'chartjs-plugin-labels';
... // component annotations
export class MyChartComponent {
... // other chart members
public doughnutChartPlugins = [ChartLabels];
public doughnutChartOptions: ChartOptions = {
responsive: true,
maintainAspectRatio: true,
plugins: {
labels: {
render: 'value',
}
},
};
... // constructor and so on
component.html
<canvas baseChart
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
[options]="doughnutChartOptions"
[plugins]="doughnutChartPlugins"
[legend]="doughnutChartLegend"
[colors]="doughnutChartColors"
>
</canvas>