Chartjs doughnut chart with gradient color

Viewed 5045

I created a doughnut chart. Is there any chance to make that colors like gradient ? I saw this post, I tried to implement on my own chart but I could not.

Any help, I will be grateful.

var ctx = $('#teamDoughnutChart');


var doughnutBar = new Chart(ctx, {

    type: 'doughnut',
    data: {
        labels: ["A", "B", "C", "D", "E"],
        datasets: [{
            label: "Status",
            backgroundColor: [
                'rgba(192, 57, 43,1)',
                'rgba(244, 187, 18, 1)',
                'rgba(41, 128, 185,1)',
                'rgba(39, 174, 96,1)',
                'rgba(191, 199, 215, 1)'
            ],
            borderColor: 'rgba(73, 79, 92, 0)',
            data: [24, 38, 96, 79, 41]
        }]
    },
    options: {
        cutoutPercentage: 70,
        maintainAspectRatio: false,
        startAngle: 0,
        tooltips: {
            mode: 'index',
            backgroundColor: '#393e48'
        },
        legend: {
            position: 'bottom',
            labels: {
                fontSize: 12,
                padding: 25,
                boxWidth: 15
            }
        }
    }
});
<canvas id="teamDoughnutChart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1 Answers
Related