CODEWITHSUNDEEP
javascriptcolorschart.js
Nenad
Nenad

Reputation: 11

Missing colors in my Chart.js, my data looks fine, but no color

I made my first bar with Chart.js library. My data looks nice, but I can't give my valuest some color.

enter image description here

My function looks like this:

var $barData = 
{
    type: 'bar',
    labels: ['Super mad', 'Middel', 'Ikke ok', 'Gennemsnit'],
    datasets: 
    [
        {
            label: 'Antal stemmer',
            data: [
            [$arrStemmer[0]], 
            [$arrStemmer[1]], 
            [$arrStemmer[2]], 
            [$Snit_Vaerdi]
            ],

            backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)'
            ],
            borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }

    ]
}

// Hent graf initialiserings setup
var $Stemmer = document.getElementById("can_afstemning_graf").getContext("2d");
// Tegn graf, men data fra barData objektet
new Chart($Stemmer).Bar($barData);

What am I missing? I am looking here in the documentation and it look fine: https://www.chartjs.org/docs/latest/.

Thanks, Nenad

Upvotes: 0

Views: 256

Answers (2)

Niels Bosman
Niels Bosman

Reputation: 956

This should work. if the $arrStemmer and $snit_Vaerdi are filled.

let $stemmer = document.getElementById('can_afstemning_graf').getContext('2d');

let myChart = new Chart($stemmer, {
    type: 'bar',
    data: {
        labels: ['Super mad', 'Middel', 'Ikke ok', 'Gennemsnit'],
        datasets: [{
            label: 'Antal stemmer',
            data: [
                $arrStemmer[0],
                $arrStemmer[1],
                $arrStemmer[2],
                $Snit_Vaerdi
            ],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

Upvotes: 0

Niels Bosman
Niels Bosman

Reputation: 956

You are setting the data incorrectly.

You should use

data: [
    $arrStemmer[0], 
    $arrStemmer[1], 
    $arrStemmer[2], 
    $Snit_Vaerdi
],

Instead of

data: [
    [$arrStemmer[0]], 
    [$arrStemmer[1]], 
    [$arrStemmer[2]], 
    [$Snit_Vaerdi]
],

Upvotes: 1

Related Questions