Issue with DonutChart in Safari

[CrixuAMG]

Expected Behavior

In this screenshot (left: Chrome v63.*, right Safari v10.1.2) you see two sets of three donut charts.
These charts hold statistics data (though there is no data at this moment).
screenshot

Actual Behavior

In Chrome and Firefox they are rendered as expected. In Safari however, the colors are reversed it seems.

In our DonutChart.vue file we perform this code in the mounted() section:

this.addPlugin({
                id: 'donut-text-plugin',
                beforeDraw: function (chart) {
                    if (chart.config.options.elements.center) {
                        // Get ctx from string
                        let ctx = chart.chart.ctx;

                        // Get options from the center object in options
                        let centerConfig = chart.config.options.elements.center;
                        let fontStyle = centerConfig.fontStyle || 'Arial';
                        let txt = centerConfig.text;
                        let color = centerConfig.color || '#000';
                        // Start with a base fontsize of 30px
                        let size = centerConfig.fontSize || '30px';
                        let sidePadding = centerConfig.sidePadding || 20;
                        let sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2);
                        ctx.font = size + ' ' + fontStyle;

                        //Get the width of the string and also the width of the element minus 10 to give it 5px side padding
                        let stringWidth = ctx.measureText(txt).width;
                        let elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

                        // Find out how much the font can grow in width.
                        let widthRatio = elementWidth / stringWidth;
                        let newFontSize = Math.floor(30 * widthRatio);
                        let elementHeight = (chart.innerRadius * 2);

                        // Pick a new font size so it will not be larger than the height of label.
                        let fontSizeToUse = Math.min(newFontSize, elementHeight);

                        // Set font settings to draw it correctly.
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        let centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
                        let centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
                        ctx.font = fontSizeToUse + "px " + fontStyle;
                        ctx.fillStyle = color;

                        // Draw text in center
                        ctx.fillText(txt, centerX, centerY);
                    }
                }
            });

            // Overwriting base render method with actual data.
            this.renderChart(this.chartData, this.options);
        },

After console logging color (immediately after defining it) and reloading the page it looked like this: screenshot 2.

Apparently it fixed itself like that, even though it's been happening for at least two weeks...

Anyway, as you can see, on Safari the background is a bit darker and does not show the percentage in the center.
Does anyone know a fix for this?

Environment

• vue.js version: 2.4.1
• vue-chart.js version: 2.7.1
• npm version: 5.3.0

[apertureless]

Hm, this could be more related to Chart.js then vue-chartjs, as this is only a wrapper for it. Maybe you should check there, if theres a similar problem somewhere in the issues.

[CrixuAMG]

I'll check it out and put any possible fix here, thanks!