score:8
Accepted answer
Your issue is the form of the colors array. Instead of defining multiple backgroundColor
arrays with each having one color, you should only define one array which has multiple colors.
Try below and it should work:
Template
<div class="chart-wrapper">
<canvas baseChart [data]="doughnutChartData" [labels]="doughnutChartLabels" [colors]="colors"
[chartType]=" doughnutChartType">
</canvas>
</div>
Controller
export class AppComponent {
doughnutChartLabels: Label[] = ['BMW', 'Ford', 'Tesla'];
doughnutChartData: MultiDataSet = [
[
55,
25,
20
]
];
doughnutChartType: ChartType = 'doughnut';
colors: Color[] = [
{
backgroundColor: [
'red',
'green',
'blue'
]
}
];
}
score:1
In your typescript define which colors you want to specify for each section
public donutColors=[
{
backgroundColor: [
'rgba(92, 184, 92,1)',
'rgba(255, 195, 0, 1)',
'rgba(217, 83, 79,1)',
'rgba(129, 78, 40, 1)',
'rgba(129, 199, 111, 1)'
]
}
];
and in html add
[colors]="donutColors"
Source: stackoverflow.com
Related Query
- Angular 8 & ChartJs change color in pie chart
- chartjs datalabels change font and color of text displaying inside pie chart
- Use transparent stroke color with chartjs pie chart
- Change font size and font color in Chartjs Angular 5
- ChartJS 2.6 - Change color of bar in Bar chart programmatically
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- Change background point color at runtime for angular ng2-charts / chartjs
- Legend color not working with randomly generated background colors in chartjs pie chart
- VueJS + Chartjs - Chart only renders after code change
- How to change label color of ng2 chart in angular
- Angular 4: Different color for bar in bar chart dynamically using ChartJS
- Angular Chart color does not change
- Change the color of displayed values in pie chart
- Chartjs change grid line color
- Chart area background color chartjs
- Chartjs random colors for each part of pie chart with data dynamically from database
- How set color family to pie chart in chart.js
- Change point size and color on hover in chartjs
- Change point color on click using ChartJS
- Display values outside of pie chart in chartjs
- How to change the color of legend in chartjs and be able to add one more legend?
- Chartjs change the specific label color in x axis in callback function
- Angular 2 chart - change point radius
- Chartjs Radar - Change color of end point labels
- Angular 2 ng2-charts donut change segment color
- ChartJS -- How do I change scale color when I have to scales?
- Chartjs doughnut chart with gradient color
- ChartJS 2.0 - Huddle labels on pie chart
- ChartJS click on bar and change it's background color
- chart.js bar chart color change based on value
More Query from same tag
- Using chart.js inside node.js
- angular chart js type line setting chart-options not working
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- Javascript object from string
- How to change the cursor to a pointer when I hover over a bar in a ChartJS bar chart?
- ChartJs bar chart - keep bars left instead of equally spread across the width
- Chartjs tick color different at zero
- Set labels from array
- Chart.js 2 - how to show all tooltips always and stylize it
- Chart.js padding not working for ScaleLabel
- Angular + Ng2 Charts: Chart not displaying as Child Component
- MYSQL Query and Chart.js and PHP
- Chart.js : straight lines and curves lines in the same graph
- How to insert arrays into objects that are inside an array? For ng2-charts / Charts.js
- chartjs-plugin-streaming: onRefresh() callback isn't working
- Stacked Bar Chart, Two on Same Line w/ Same Color
- Chart section is empty
- how to set a custom tick format in chartjs options from laravel controller?
- ChartJS: Mapping Non numeric Y and X
- Chart.js - Black bar colors in mobile devices
- ChartJS scale ticks with scatter plot
- Points cut at half at the edges of top and bottom, at chartjs
- Chart.js Picture inside doughnut segment
- How to display currency in Chart js
- Generate multiple line charts in Django with ChartJS
- [Vue warn]: You may have an infinite update loop in watcher with expression "chartData"
- How to add labels on top of the chart bar with Chart.js 2
- Manually display tooltip Chart.js
- How to load data values from cookie into Chart.js
- Creating Stacked chart.js graph from array