Doughnut Chart in Safari: Color only appears on hover

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: No hover
image

Safari: Hover over minority label
image

On Chrome & Firefox, there is no issue at all, and the chart renders perfectly.
image

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.
image

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
        }
]}]}

Author: Fantashit

1 thought on “Doughnut Chart in Safari: Color only appears on hover

Comments are closed.