PieChart disappears on mouseout - chart.js

Question

I am creating a very basic PieChart from the documentation on Chartjs.org. I think I am not doing anything fancy, or adding any extraneous libraries.
var data = [{
"value": 20,
"label": "Slice1"
}, {
"value": 10,
"label": "Slice2"
}];
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Pie(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Problem:
After the Pie Chart is rendered initially, if I mouseout over the chart, it disappears. It seems it is there as the tooltips appear when I mouseover, but not the chart/pie slices themselves.
This behavior was noticed in the latest Firefox and Chrome browsers.

Answer 1

So, per the Chart.js documentation, http://www.chartjs.org/docs/#doughnut-pie-chart-data-structure
For a pie chart, you must pass in an array of objects with a value and an optional color property
It turns out the color property is not so optional after all. Sure, the chart will render fine (as in all black pie slices, divided by white segment stroke color, pretty bad looking by default) with no Javascript errors. But, when you mousemove and mouseout of the pie, the colors magically change to white (with the same white segment stroke color), rendering the whole pie chart invisible against a white background, with only the tooltips showing on mousemove, mouseout.
The documentation of Chart.js should either make a note of this behavior, or make color a mandatory property or add good default colors, that don't change magically with mouse events.
But till then, users should assume the color property is mandatory to prevent headaches.
This is significant, as many developers will want to massage the data JSON returned from server to add UI related info, to keep the server side free of any UI logic.