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
- How to Update 2 dataset for 2 lines in a CharJS line graph?
- Chart.js - access yAxes properties
- Display chart data based on API call
- Specify varying thickness of each bar in Chart.js bar chart
- Wrong tootip in chartjs
- Create PDF with mpdf and chart.js
- chartjs: How to create single outer border for stacked barchart
- Chart.js:9352 Failed to create chart. Unable to dynamically create charts
- How do I horizontally center a line chart when their is a single X-Axis value?
- How to use Chart.js to draw mixed Financial / Candlestick and Bar Chart?
- How do I create a chartjs bar chart?
- Chart.JS tooltip callbacks label and title (v3.5)
- Is it possible to print a chart with vue-chartjs?
- Chart.js Bar chart : display labels
- How we can draw a circle in bar chart
- Multiple charts in one page with chart.js
- Angular Chart.js does not show trendline
- How to use Chart.js in Nodejs?
- How to make chartjs pie chart responsive
- How to add an event when clicking a bubble in bubble chart?
- problem hidding the label in chartjs (ng2chart for angular)
- Using Javascript with MPDF
- How to draw multiple lines in chart.js
- Set an array to be displayed at Chart js
- chart js label not showing
- Chart.js use font awesome in labels
- Charts.js dynamic data call (Angular)
- How to get a dynamic number into a chart.js chart?
- How to print multiple items with the same charts? any directions?
- How to create dynamic D3 tickFormat in dc charts