score: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>
score: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();
},
},
score: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.
score: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.
Source: stackoverflow.com
Related Query
- How do I use plugins in ng2-charts?
- How to use chart.js script to draw multiple pie Charts
- How to use chartjs-plugin-datalabels for specific charts using vue-chart.js
- How to use plugins in chartjs and laravel chart consoletvs/chartsjs
- how to use chart.js with knockout.js to create dynamic charts
- How to run Chart.js samples using source code
- Charts js. How to pass datasets use a select dropdown by angular instead jquery
- how to not repeat code while creating multiple charts in chart js
- How to use two Y axes in Chart.js v2?
- How to use the tooltipTemplate on Chart.JS 2.0
- How to modify bar width in Chartjs 2 bar charts
- How to use percentage scale with Chart.js
- Charts JS: How to set units?
- How to drill down charts with ChartJS?
- How to save Chart JS charts as image without black background using blobs and filesaver?
- Apply/Register conflicting plugins to different charts
- How to add images as labels to Canvas Charts using chart.js
- How to use two datasets in chart.js doughnut chart?
- How to use PrimeNg Chart of Width and Height?
- How to properly use the chartjs datalabels plugin
- How to zoom charts in chart.js using angular 7
- How to display the labels in doughnut chart using ng2 charts?
- How to use icon as legend in Chart.js?
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- How to use HTML in custom tooltip in angular charts?
- How to dynamically use chartjs-plugin-annotation with ng2-charts?
- How do I use NuGet to install ChartJS?
- How do I make line charts overlay over bar charts in chartjs
- How to use chart.js in Angular2?
- How to create dynamic charts with Django and Chart.js?
More Query from same tag
- Chart.js Version 3: how to set the different color for tick lines and gridlines
- Dotted Line in ChartJS
- Converting JSON data into Chart.js array from strings
- How to load chart data to an appended canvas
- Chart.js Cannot read property 'apply' of undefined
- Passing data from Python to JavaScript to plot Chart.js
- Change point style in Chartjs via external event
- Chartjs does not show annotations when x axis is of type time
- How to force animation on chartjs?
- How do I customize the chart.js tooltip? Two labels have the same data, which I want to show you with each data
- Update only Chart.js without animations and without refreshing the browser
- Example: Doughnut | Error: Uncaught ReferenceError: Utils is not defined
- Charts.JS Bars Not Alternating Color
- (Chart.js 3.7.0) change position of x-axis ticks to alternate between each tick?
- chartjs bar chart filter using datetimepicker
- Vue3 Chart.js not rendering
- Have all label in Chartjs be at fixed positions
- The engine “node” is incompatible with this module when installing React-chartjs-2 Chart.js,
- ChartJS: How to set a data point to be hidden by default?
- Removing exceeding parts of axis
- Export chart and table both to pdf
- Chartjs remove text striking on legend
- Pie Charts JS: How to set units?
- How to just show x-axis (at y = 0) using chartkick (chart.js)?
- angular-chart.js - define set Y axis width
- How to add an empty data point to a linechart on Chart.js?
- Exponential decrease
- Tooltips in Chart js are always black instead of the color of the corresponding dataset
- Highlight external element on ChartJS hover
- vue-chart data is loaded correctly but options are ignored