In Safari (desktop 9.1.1, but reproduced on iOS 9), my doughnut charts are dark gray initially, showing their segment color only on hover. Using Chart.js 2.1.6 (2.1.4 has the issue as well…which is why I attempted an upgrade).
Safari: Hover over minority label
On Chrome & Firefox, there is no issue at all, and the chart renders perfectly.
Any clue why? Being a object, it is unclear how to debug the hover state.
One more peculiarity on Safari: when I hover over the majority label, the entire pie is colored, whereas hovering over the minority category (orange above) is as expected.
In Safari, the legend is never colored, regardless of hover.
Here is the config for the Chart.
{
"labels": [
">30 Days or Not Readmitted",
"<= 30 Days"
],
"datasets": [
{
"data": [
0.93873853099924,
0.061261469000764
],
"backgroundColor": [
{
"r": 31,
"g": 119,
"b": 180,
"alpha": 0.7
},
{
"r": 255,
"g": 127,
"b": 14,
"alpha": 0.7
}
]}]}
That current config is also causing an error in Chrome. It works correctly if you set the colors to be in the format
"rgba(r, g, b, a)"
. Here is a working example: http://codepen.io/anon/pen/EybmEP