ChartJS canvas not displaying colors in edge browser

Question

I am using a piechart which involves different colours. The chart looks fine on Chrome but on Edge browser, the chart looks grey and different sections are not differentiable. I checked ChartJS canvas not displaying rgba colors in IE, Safari and Firefox , the accepted answer was to remove the array of colours, but in my case, multiple colours are involved and not just one.

 public colors = [
 {
  backgroundColor: [
    "rgba(23,43,83)",
    "rgba(226, 229, 232)",
    "rgba(17, 123, 66)",
  ],
  borderWidth: 0,
  hoverBackgroundColor: [
    "rgba(23,43,83)",
    "rgba(226, 229, 232)",
    "rgba(17, 123, 66)",
  ],
  hoverBorderWidth: 0,
},
]

Answer 1

From the Link (posted in the original post), we can see that you are using line chart, instead of the pie chart. When using a line chart, if we set multiple color, it will override the color, so the chart looks grey.

If you want to display multiple colors and different alias using pie charts, please refer to the following sample code:

JavaScript reference:

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<style type="text/css">
    /* Chart.js */
    @keyframes chartjs-render-animation {
        from {
            opacity: .99
        }

        to {
            opacity: 1
        }
    }

    .chartjs-render-monitor {
        animation: chartjs-render-animation 1ms
    }

    .chartjs-size-monitor, .chartjs-size-monitor-expand, .chartjs-size-monitor-shrink {
        position: absolute;
        direction: ltr;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        pointer-events: none;
        visibility: hidden;
        z-index: -1
    }

        .chartjs-size-monitor-expand > div {
            position: absolute;
            width: 1000000px;
            height: 1000000px;
            left: 0;
            top: 0
        }

        .chartjs-size-monitor-shrink > div {
            position: absolute;
            width: 200%;
            height: 200%;
            left: 0;
            top: 0
        }
</style>

and

<div id="canvas-holder" style="width:40%">
    <div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
    <canvas id="chart-area" style="display: block; width: 762px; height: 381px;" width="762" height="381" class="chartjs-render-monitor"></canvas>
</div>
<script>
    var randomScalingFactor = function () {
        return Math.round(Math.random() * 100);
    };

    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                ],
                backgroundColor: [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                'Red',
                'Orange',
                'Yellow',
                'Green',
                'Blue'
            ]
        },
        options: {
            responsive: true
        }
    };

    window.onload = function () {
        var ctx = document.getElementById('chart-area').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };

</script>

The result like this:

More details about chart.js, please check the chart document.