How to modify the label of each dataset in charts.js?

0

I have this example code and I wanted each set that contained 4 data, however I wanted each die to have a specific name example, in the first set I have, first class, second class, third class and fourth class, this repeats for the other sets, I want each label to have a different label , eg: first set with A, B, C and D, the second set is either 1,2,3,4 the third Q , W, E, and F, and so on. Follow the code.

 <!-- Grafico Inicio -->
<canvas class="bar-charts"></canvas>

<!-- Grafico Final-->


<!-- Script para os Graficos-->
<script src="../js/Chart.js"></script>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
    var ctx = document.getElementsByClassName('bar-charts');

    // Type, Date e options

    var chartGraph = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [" "," "," "," "," "," "," "," "],
            datasets: [{
                label: "Primeira Classe",
                data: [2,4,7,24,3,14,22,19],
                borderWidth: 5,
                backgroundColor: 'rgba(77,166,253,0.85)'
            },{
                label: "Segunda Classe",
                data: [2,4,7,24,3,14,22,19],
                borderWidth: 5,
                backgroundColor: 'rgba(77,166,253,0.85)'
            },{
                label: "Terceira Classe",
                data: [2,4,7,24,3,14,22,19],
                borderWidth: 5,
                backgroundColor: 'rgba(77,166,253,0.85)'
            },{
                label: "Quarta Classe",
                data: [2,4,7,24,3,14,22,19],
                borderWidth: 5,
                backgroundColor: 'rgba(77,166,253,0.85)'
            }],
        },
        options: {
            title:{
                display:true,
                text:"Chart.js Bar Chart - Stacked"
            },
            tooltips: {
                mode: 'index',
                intersect: false
            },
            responsive: true,
            scales: {
                xAxes: [{
                    stacked: true,
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
    });
</script>
    
asked by anonymous 26.01.2018 / 18:28

0 answers