How can I do that in angular-chart.js v1.0.0 and off course ChartJS v2.1.6
How can I set different colours for each bar in angular-chart.js?
Asked
Active
Viewed 298 times
0
-
linked answer has everything.. what else you want? – Pankaj Parkar Jul 27 '16 at 16:27
-
I want this work in versions above, because the previous post is about angular-chart.js v0.x.x and ChartJS v1.0.x – jesus.saad Jul 28 '16 at 19:49
2 Answers
2
- Use one dataset for each bar
- Set all data to 0 for the dataset except the data you want to show
- Custom color for each dataset
- BorderWidth = 0 to hide empy data and stacked = true on X axe
- Custom tooltip callback to hide empty dataset
example
https://jsfiddle.net/3qas1ar8/3/
frlinw
- 552
- 6
- 15
-
perfect solution frlinw!! thank you so much! I can't vote :( in your solution, I have no reputation... – jesus.saad Aug 01 '16 at 18:14
-
@jesus.saad: even if you can't upvote the answer, you should be able to mark it as acceptet. – uminder Jul 22 '20 at 19:12
0
public barChartColors: Array<any> = [
{
**backgroundColor: ["#36a2eb", "rgba(47, 132, 71, 0.8)", "rgba(30, 50, 71, 0.8)", "green", "blue", "purple", "orange"
],**
borderColor: 'rgba(105,159,177,1)',
pointBackgroundColor: 'rgba(105,159,177,1)',
pointBorderColor: '#fafafa',
pointHoverBackgroundColor: '#fafafa',
pointHoverBorderColor: 'rgba(105,159,177)'
},
];
This will provide different color for each bar in a bar-chart.
syed
- 606
- 8
- 11