Chart tooltip colors broken with latest verison 3.0.7

[mtgleeson]

Reproduction of the problem I recently upgraded to ng2-charts ver. 3.0.7 from 3.0.0-rc.2 as part of upgrading my project from Angular 12 to 13. I am using chart.js 3.7.0 (confirmed this also happens with charts 3.6.0).

After upgrading the colors for the datasets in the tooltip doesn't match the colors of the dataset in the chart. This is happening for line, bar and pie charts (I haven't checked other types). It seems the tooltip colors are no longer inheriting from the dataset colors.

I created a blank project and used charts.js (version 3.7.0) and created a chart. The issue didn't occur so it wasn't a problem caused by charts.js. I then added ng2-charts and reproduced the issue.

See the issue here - https://codesandbox.io/s/ng2-charts-tooltip-color-issue2-92kuj

I have been able to work around it by additionally specifying the following in the datasets: Pie charts:

• hoverBackgroundColor
• hoverBorderColor

Line charts:

• pointBackgroundColor
• pointHoverBackgroundColor
• pointBorderColor
• pointHoverBorderColor

Bar charts:

• hoverBorderColor
• hoverBackgroundColor

[santam85]

Thanks for the reproduction example, it helps a lot. This might be because of the way ng2-charts overrides the original defaults, I believe something is going wrong in the scripted properties. Looking into it ASAP.

[chinahnzl]

Hi, I met the same issue when I produced a bar Chart. When I hover to the bar clusters, the hover color is not correct, this only appeared when the bar clusters amount more than 3 pieces, which means from the 4th bar cluster, the hover color is wrong. Attached is a screenshot image, I am using the 3.0.8 of ng2-charts and the 3.7.1 of chart.js.

Appreciate!

[roddev-v]

I encountered the same issue on chartjs 3.7.1 and ng2-charts @3.0.0. Until now I was able to reproduce it on a doughnut chart :)

[santam85]

This is becoming an increasingly common issue as Chart.js parent library is introducing a color generation pattern that conflicts with the wrapper one. For now you can use the overall configuration when importing the module to disable ng2-charts color generation and work around the issue:

NgChartsModule.forRoot({generateColors:false})

In a future breaking change it's very likely that the color generation overrides will be completely removed from the Angular wrapper library, and we'll completely defer to the Chart.js logic.