javascript - datasets - Gráfico de dona Chartjs con color degradado

line chart options chart js

Question

Creé un gráfico de dona. ¿Hay alguna posibilidad de hacer esos colores como gradiente? Vi esta publicación , traté de implementarla en mi propia tabla pero no pude.

Cualquier ayuda, lo agradeceré.

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>

Answer 1

Tengo el mismo problema. Encontré solución. Prueba esto

var canvas = $(''#teamDoughnutChart'');
var ctx = canvas.getContext(''2d'');
var gradientColors = [
{
  start: ''#f3bb98'',
  end: ''#ea8ba9''
},
{
  start: ''#F6A064'',
  end: ''#ED5384''
}
];

var gradients = [];

gradientColors.forEach( function( item ){
    var gradient = ctx.createLinearGradient(0, 0, 150 , 150);
    gradient.addColorStop(0, item.start);
    gradient.addColorStop(1, item.end);
    gradients.push(gradient);
});


var doughnutBar = new Chart(canvas, {

type: ''doughnut'',
data: {
    labels: ["A", "B"],
    datasets: [{
        label: "Status",
        backgroundColor: gradients,
        borderColor: ''rgba(73, 79, 92, 0)'',
        data: [24, 38]
    }]
},
options: {
    cutoutPercentage: 70,
    maintainAspectRatio: false,
    startAngle: 0,
    tooltips: {
        mode: ''index'',
        backgroundColor: ''#393e48''
    },
    legend: {
        position: ''bottom'',
        labels: {
            fontSize: 12,
            padding: 25,
            boxWidth: 15
        }
    }
}
});