gene b.
gene b.

Reputation: 11996

ChartJS with ChartJS DataLabels: Change Color per Dataset for Value Labels

I'm using ChartJS with the plug-in ChartJS DataLabels to show text values right next to the points (who would have thought that a plugin is necessary for this basic task, but I digress).

My issue I need to vary the color of my text labels along with the individual dataset. But so far I haven't found a solution. I'm adding new datasets dynamically, they're not statically pre-loaded. The color should match the color of the dataset.

Suppose I have

var colorpalette = ["red", "blue", "green", "magenta", "yellow", "brown", "purple", "orange", "black", "gray"];
var currseriesnum = 0;
var chart = null;

function setUpChart() {

    var ctx = document.getElementById('chartArea').getContext('2d');
    chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: monthnames, 
            datasets: [] // Initially blank - series added dynamically with chart.update()
        }, 
        options: {
            legend: {
                display: false
            },          
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }, 
            plugins: {  // ChartsJS DataLabels initialized here
                datalabels: {
                    anchor: 'end',
                    align: 'bottom',
                    formatter: Math.round,
                    font: {
                      weight: 'bold', 
                      size: 16
                    },
                    color: colorpalette[currseriesnum] // Pick color dynamically
                }
            }           
        }
    });     

}

Doesn't work. Also tried a function, color: function(context), but unsure how to retrieve the current index of the dataset I'm getting here.

enter image description here

I'm adding series to the chart dynamically (initially empty) as below, and incrementing the global var currseriesnum.

chart.data.datasets.push({
    label: keyValueSelection.label, 
    fill: false, 
    data: keyValueSelection.value, 
    borderColor: colorpalette[currseriesnum], 
    borderWidth: 2
});
chart.update();
currseriesnum++;

Upvotes: 1

Views: 3631

Answers (1)

gene b.
gene b.

Reputation: 11996

They gave me the answer on the ChartJS DataLabels forum:

plugins: {
    datalabels: {
        color: function(ctx) {
            // use the same color as the border
            return ctx.dataset.borderColor
        }
    }
}

Upvotes: 3

Related Questions