1

This question is about angular-chartjs 1.1.1.

First of all I wanted to disable the hover color on charts. I already set the following options to false:

tooltips: {
    enabled: false
},
hover: {
    enabled: false
},

This does not work so I decided to change the colors of my doughnut chart, including the highlightColor. To set the colors I added the directive chart-colors="colors" to my canvas. To my scope I added the following:

$scope.colors = [{
    fill: true,
    backgroundColor: ["#FF6384","#36A2EB"]
}]

I also tried the following:

$scope.colors = [{
    fill: true,
    backgroundColor: "#FF6384"
},{
    fill: true,
    backgroundColor: "#36A2EB"
}]

Both code snippets are not working. They just turn my Chart partly to grey, but not the specified colors. Only the following code changed my chart colors:

$scope.colors = ["#FF6384","#36A2EB"]

This will only change the backgroundColor, but I want to change the highlightColor too, so this solution is no option for me. Anyone have an idea how I can set the backgroundColor and the hightlightColor of the Chart?

Michael Doye
  • 8,063
  • 5
  • 40
  • 56
Ben
  • 696
  • 9
  • 19

2 Answers2

1

can you provide full code? would it make more easy for qualified answer.

Based on that https://stackoverflow.com/a/28654829/6629704 i assume, that you possibly should add two more colors to array, since maybe the 3rd and 4th position of array would define highlight Colors

Community
  • 1
  • 1
Dominik Heim
  • 119
  • 7
1

I found a solution. It seems I have to use exactly this wording:

colors: [{
    backgroundColor: '#FF6384',
    pointBackgroundColor: '#FF6384'
}, {
    backgroundColor: '#36A2EB',
    pointBackgroundColor: '#36A2EB'
}],

So the pointBackgroundColor would change the chart color not the backgroundColor itself. The backgroundColor is needed for the hover effect, so the pointedBackground would be invisible and the background comes to the front.

Thanks to @Dominik Heim, your link was a big help!

Ben
  • 696
  • 9
  • 19