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:
Any pointers as to what I am doing wrong greatly appreciated.
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.
}
}]
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments