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
- Is there a convenient way to print values to a JS chart from a CSV file without converting it?
- How do I display a different chartjs tooltip title?
- Hide labels on x-axis ChartJS
- Moving vertical line when hovering over the chart using chart.js in v2.9.4
- How to fix map is not function even there is already set data in the useState using React Hook
- How do I customize y-axis labels on a Chart.js line chart?
- Create a Graph and return it as an image on a nodejs server
- chart.js v2: Align time scale labels with the center of the bars
- Radar charts for chartjs always stay filled
- chartjs stack bar graph color not working
- ChartJS: Uncaught TypeError: Cannot read property 'call' of undefined
- How can I put sign (%) on data in ChartJS?
- Create a rounded bar graph with Angular and chartJS
- JavaScript Error - Uncaught SyntaxError: Unexpected number
- Chartjs line graph point hover animation buggy / jumpy
- i can't create a line vertically with react annotation
- Is There any way to show image on top of the stacked bar, Am getting image on every color Instead of that i need only on top of each bar
- Doughnut chart from Chart.js, custom legend and call of original handler not works as expected
- Multi- Line title in chart.js not working
- Remove radar chart labels in chart.js
- React and chart.js with json
- Chart.js: How to set minimum height of chart but still maintain aspect ratio?
- (Ionic 3) How to make font size of labels in charts.js responsive?
- Getting access to already created Chart.js chart
- Chartjs average line over bars
- chart.js dynamically adjust gap between vertical bars
- chartjs show 24 hours in line chart
- Chart JS: is possible mix Scatter and bar chart in Chart JS?
- X-axis of Chart.js not taking type : 'time'
- Chartjs sample can't be reproduced