score:15
try something like the following ...
public piechartcolors: array < any > = [{
backgroundcolor: ['red', 'yellow', 'rgba(148,159,177,0.2)'],
bordercolor: ['rgba(135,206,250,1)', 'rgba(106,90,205,1)', 'rgba(148,159,177,1)']
}];
...
not a 'ng2-charts' pro, but afaik this should work.
score:1
i agree with above answer, i would like to provide details if someone needs it. my example is in pie chart it works for others too.
step-1:
add the following in your component.ts file
public piechartoptions: chartoptions = {
responsive: true,
};
public piechartlabels: label[] = [['not', 'completed'], ['completed', 'tasks'], 'pending tasks'];
public piechartdata: singledataset = [300, 500, 100];
public piecharttype: charttype = 'pie';
public piechartlegend = true;
public piechartplugins = [];
public piechartcolors: array < any > = [{
backgroundcolor: ['#fc5858', '#19d863', '#fdf57d'],
bordercolor: ['rgba(252, 235, 89, 0.2)', 'rgba(77, 152, 202, 0.2)', 'rgba(241, 107, 119, 0.2)']
}];
chartclicked(e){
console.log(e);
console.log('=========chart clicked============');
}
charthovered(e){
console.log(e);
console.log('=========chart hovered============');
}
step-2 :
your component.html should look something like below:
<canvas basechart
[data]="piechartdata"
[labels]="piechartlabels"
[charttype]="piecharttype"
[options]="piechartoptions"
[plugins]="piechartplugins"
[legend]="piechartlegend"
[colors]="piechartcolors"
(charthover)="charthovered($event)"
(chartclick)="chartclicked($event)"
>
</canvas>
score:6
solved this problem by adding *ngif="piechartlabels && piechartdata"
condition in the html template:
<div class="card">
<div class="card-header">
pie chart
</div>
<div class="card-body">
<div class="chart-wrapper" *ngif="piechartlabels && piechartdata">
<canvas basechart class="chart"
[data]="piechartdata"
[labels]="piechartlabels"
[charttype]="piecharttype"
(charthover)="charthovered($event)"
(chartclick)="chartclicked($event)">
</canvas>
</div>
</div>
</div>
Source: stackoverflow.com
Related Query
- Chart.js ng2-charts colors in pie chart not showing
- Pie Chart using chart.js not showing up but bar charts are?
- Chart.js pie chart not showing in Google Chrome canvas
- Chart JS - Grid colors and gradient fill not showing
- Legend color not working with randomly generated background colors in chartjs pie chart
- Chart.js colors in bar chart not showing
- Chart.js pie chart not showing
- Chart.js not showing all labels on pie chart
- Mixed chart not showing both charts simultaneously chart.js
- Colors not showing up on charts in ionic 3
- ChartJs - pie chart not showing
- angular-chart not showing Pie Chart
- Chartjs pie chart not showing from dynamic data
- how to not repeat code while creating multiple charts in chart js
- Chart js pie chart not showing dynamic data using JSON
- Chartjs random colors for each part of pie chart with data dynamically from database
- chartjs + Angular6 is not showing charts or any error
- Chart.JS Mixed Chart - Bars Not Showing
- Charts js not showing
- Chart.js: width and height of a pie chart not respected
- Series Details Not Showing in Angular Chart with Charts.js
- How do you set pie chart colors in angular-chart.js
- Chart JS custom tooltip not showing
- Pie chart is not getting rendered in ChartJS
- Chart JS not showing On hover with small data
- Configure Pie Chart Colors Using Chart.js and PHP
- My pie chart (chartJs) does not appear
- Chart.js tooltip not showing on line chart
- chart annotations not showing in Angular 2
- Charts not showing in wicked pdf
More Query from same tag
- Why doesn't my donut chart, created with Chart.js, appear?
- Android WebView HTML5 canvas error
- Chartjs display multiple info with different units in label
- PrimeFaces: ChartJs stacked bar chart label removal
- Chart.js - Add gradient to line chart background
- ChartJS add tooltip to a grouped bar chart
- Chart.js Bar charts have always the value of 1 whyle i took variables
- How to get the database data into ChartJS using codeigniter
- ChartJs won't appear in DIV in same page
- Filter dates from the first day of the month to the current date
- How to install chart.js
- Highlight Line Series on legend hover
- Chart.js, PHP and JSON loop issue
- Chartjs different row background colors according to Y axis values
- Django 1.11 - child template not inheriting from parent
- how to programmatically make a line chart point active/highlighted
- Chart.js 2.0: How to change title of tooltip
- chart.js bar chart color change based on value
- how do I make chart.js smaller? (html, chart.js)
- Chart.js only last point
- Weather graph using Angular 2, chart.js and json data
- ChartJS: Change the positions of the tooltips
- Angular PrimeNG Chart Module: Customize hover text
- Vue.js Vue-chart.js linear gradient background fill
- How to display datasets correctly on a graph using Chart.js
- NuxtJS ChartJS Gradient Color doesnt apply
- ChartJS AJAX load labels and data
- How to change Chart.js horizontal bar chart Width?
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- Chart.js 2 - Always display only some tooltips in bubble chart