Chart js options not changing chart

RGriffiths

I have chart js bar chart that displays data correcly however I have two formatting problems that I can't seem to solve:

I want all x-axis labels fixed to be at 90 degrees to the axis (not horizontal or utilising auto rotation) and I want the colour of the bars to be green. I have followed the docs but for some reason I don't get the desired outcome.

    var barChartData = {
        labels: ['label 3', 'label 3', 'label 3'],
        datasets: [{
            fillColor: "rgba(0, 255, 0, 1.0)", 
            data: ["1", "2", "3"]
        }]
    };

var ctx2 = document.getElementById("allStudentsProg8").getContext("2d");
var myBar = new Chart(ctx2, {
    type: 'bar',
    data: barChartData,
    options: {
        elements: {
            rectangle: {
                borderWidth: 2,
                borderSkipped: 'bottom'
            }
        },
        responsive: true,
        legend: {
            display: false,
        },
        scales: {
            xAxes: [{
                ticks: {
                    minRotation: 90
                }
            }]
        }
    }
});

However this is what I get:

enter image description here

Any pointers as to what I am doing wrong greatly appreciated.

KorbenDallas

ChartJS v2.0

Change next:

Color

         datasets: [{
            fillColor: "rgba(0, 255, 0, 1.0)",
            data: ["1", "2", "3"]
        }]

to

         datasets: [{
            backgroundColor: "rgba(0, 255, 0, 1.0)",
            borderColor: "#000",
            data: ["1", "2", "3"]
        }]

Rotation of lables

            xAxes: [{
                ticks: {
                    minRotation: 90
                }
            }]

to

            xAxes: [{
                ticks: {
                    maxRotation: 0, //Do not change ticks width. Or increase              if you need to change also ticks.
                },
                afterCalculateTickRotation : function (self) {
                    self.labelRotation = 90; //Or any other rotation of x-labels you need.
                }
            }]

Manual labels rotation ChartJS v2.0

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related