Color chartjs numbers

Question

I made a code in js and php but I can’t find where you are setting the color of the numbers that show the values on the dots of the graph lines. I need to know at what point you have the red color on the numbers.

Code:

<div class="large-12 columns">
    <div class="header panel">
        <canvas id="canvasBG"></canvas>
    </div>
</div>

<script>

var dataBG = {
    labels: [ <?php foreach($class->Lista("BG") as $dados){ echo '"'.$dados->getQtTotalOrigem().'",'; }?> ],
    datasets: [{
        label: "Entregas",
        backgroundColor: window.chartColors.red,
        borderColor: window.chartColors.red,
        data: [ <?php foreach($class->Lista("BG") as $dados){ echo $dados->getQtTotalDestino().','; }?> ],
        fill: false,            
    }, {
        label: "Efetivas",
        backgroundColor: window.chartColors.blue,
        borderColor: window.chartColors.blue,
        data: [ <?php foreach($class->Lista("BG") as $dados){ echo $dados->getQtTotalFinal().','; }?> ],
        fill: false,
    }, {
        label: "Veiculos",
        fill: false,
        backgroundColor: window.chartColors.green,
        borderColor: window.chartColors.green,
        data: [ <?php foreach($class->Lista("BG") as $dados){ echo $dados->getQtAtrasadoOrigem().','; }?> ],
    }]

};

var ctx = document.getElementById("canvasBG").getContext("2d");
window.myBar = new Chart(ctx, {
    type: 'line',
    data: dataBG,
    options: {

        "hover": {
            "animationDuration": 0
        },
        "animation": {
            "duration": 1000,
            "onComplete": function() {
                var chartInstance = this.chart,
                ctx = chartInstance.ctx;

                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';


                this.data.datasets.forEach(function(dataset, i) {
                    var meta = chartInstance.controller.getDatasetMeta(i);
                    meta.data.forEach(function(bar, index) {
                        var data = dataset.data[index];
                        ctx.fillText(data, bar._model.x, bar._model.y - 1);
                    });
                });
            }
        },

        responsive: true,
        title:{
            display:true,
            text:'Apuração de entregas'
        },
        legend: {
            "display": true,
            position: 'bottom',
        },
        tooltips: {
            "enabled": false
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: false,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: false,
                    labelString: 'Value'
                }
            }]
        }
    }
});
</script>

Graph:

Answer 1

chartsjs has a number of attributes with specific functionalities when it comes to the appearance of the rendered object.

An example for the 'labels' the legend (removed from the documentation itself):

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
    }
});

In your case, you want to change the color of the dataset, the function backgroundColor is a function of 'dataset' not of 'label', so it always stays the same color, in case it picks the color informed on the last call.

To achieve the desired result, you must enter the colors as a property of dataset, but in the form of array, one color for each label:

data: {
    labels: ["Entregas", "Efetivas", "Veiculos"],
    datasets: [{
        label: 'Dados',
        data: ['Dados'],
        backgroundColor: [
            '#D3E4F3'
        ],
        borderColor: [
            '#000',
            '#999',
            '#ccc'
        ],
        borderWidth: 1
    }]
}

The same thing is true for any dataset attribute, it is not passed together with the data, but an array for each function you want out of the data.

Functional example:

Chart.defaults.global.legend.labels.usePointStyle = true;

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
    labels: ["Entregas", "Efetivas", "Veiculos"],
    datasets: [{
        label: 'Dados',
        data: [17,9,29],
        backgroundColor: [
            '#fff',
            '#000',
            '#ccc'
        ],
        borderColor: [
            '#000',
            '#999',
            '#ccc'
        ],
        fontColor: [
            '#000',
            '#999',
            '#ccc'
        ],
        borderWidth: 1
    }]
},
    options: {
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                fontColor: '#333'
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div class="container">
  <canvas id="myChart"></canvas>
</div>

Sources:

Doc. About Styles

Recommendation on why not change colors if you don’t know what you’re doing:

8% Better - Data Graphics and Colour Vision

UPDATING

To set the values color you need to follow:

    datasets: [
            {
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1,
            backgroundColor: '#000',
            borderColor: '#000'
            },  
                {
                    label: '# of Points',
                    data: [7, 11, 5, 8, 3, 7],
                    borderWidth: 1,
            backgroundColor: '#ccc',
            borderColor: '#ccc'

                }
    ]

However, for Harts in 'LINE' it will always put a single color to all Lines, there is in the documentation referring to type='line' no function indicating to change the color of the 'value', that is, there is no way, note well that this setting only color of borda and of background, never of label of valor.

'Cause all the colors are the same ?

Because you defined the 'backgroudColor', and the line with higher values, will have their backgroundColor in front of others, note that in your example, if the value of 'efetivas' become greater than that of 'entregas' the color of values will turn blue.

This may be a bug of the plugin, or even if it has been done to operate like this, summarizing, you will not be able to change the color of values in one type=line without changing/extending the plugin.

PS: There may be ways for this, but I don’t know any way that it will work.

Answer 2

Is in this stretch:

var dataBG = {
    labels: [ <?php foreach($class->Lista("BG") as $dados){ echo '"'.$dados->getQtTotalOrigem().'",'; }?> ],
    datasets: [{
        label: "Entregas",
        backgroundColor: window.chartColors.red, <-- Aqui
        borderColor: window.chartColors.red, <-- Aqui
        fontColor:  window.chartColors.red, <!-- Edit 1: Implementação do código. 
        data: [ <?php foreach($class->Lista("BG") as $dados){ echo $dados->getQtTotalDestino().','; }?> ],
        fill: false,            
    }, {
        label: "Efetivas",
        backgroundColor: window.chartColors.blue, <-- Aqui
        borderColor: window.chartColors.blue, <-- Aqui
        data: [ <?php foreach($class->Lista("BG") as $dados){ echo $dados->getQtTotalFinal().','; }?> ],
        fill: false,
    }, {
        label: "Veiculos",
        fill: false,
        backgroundColor: window.chartColors.green, <-- Aqui
        borderColor: window.chartColors.green, <-- Aqui
        data: [ <?php foreach($class->Lista("BG") as $dados){ echo $dados->getQtAtrasadoOrigem().','; }?> ],
    }]

};

If you want to use a different color use only:

backgroundColor: 'rgb(255, 255, 255)',
borderColor: 'rgb(255, 255, 255)',