Chart.js

Question

How do I make my red and blue bars seperate?

https://code.sololearn.com/WcvBMchBCCur/?ref=app

Answer 1

The x-axis labels are intended for different values within one dataset, the legend labels are intended for different datasets. So there's an easy way to do your chart using x-axis labels and there is an easy way to do it using a legend. I found no easy way of using x-axis labels and legend labels for the same thing. You could probably do it by setting up the legend manually. But I'm not sure it is worth the effort since you'll only end up with redundant information.
(The third graph in my code is an illustration of how to use x-axis labels and legend labels for different information.)
https://code.sololearn.com/WoAn3YUE90Qd/?ref=app

Answer 2

Why are you treating the values as separate datasets?

Answer 3

so i can have more than one legend or label i should say

Answer 4

I think your datasets you should be

...
data: {
labels: [”Italy”, “USA”],
datasets: [{
label: “Countries”,
data : [20, 30],
backgroundColor: [”red”, “blue”]
]}
}

Answer 5

data: {
labels: ["Italy", "USA"],
datasets: [{data: [55, 80],
backgroundColor: ["red", "blue"]}]
}

Answer 6

k, thanks but I want 2 of the legend things. One in red for Italy and one blue for USA

Answer 7

So i would have only one x-axis?

Answer 8

If you really want the legend that's the easy way to do it. Personally I prefer the design with two x-axis labels but no legend.

Answer 9

ye ye