chart.js - Second bar, with another label and different colors

0
votes

I am using chart.js to make bar chart with two bars. I need different colors for them. But when I have two datasets, I have different colors which I want, but bars are grouped in one label like this: screenshot and code:

var barChartData = {
                        labels : ["Pronájem","Trvalá licence"],
                        datasets : [
                            {
                                fillColor : "rgba(0,59,98,0.5)",
                                strokeColor : "rgba(0,59,98,0.8)",
                                highlightFill: "rgba(0,59,98,0.75)",
                                highlightStroke: "rgba(0,59,98,1)",
                                data : [30000]
                            },
                            {
                                fillColor : "rgba(179,178,178,0.5)",
                                strokeColor : "rgba(179,178,178,0.8)",
                                highlightFill : "rgba(179,178,178,0.75)",
                                highlightStroke : "rgba(179,178,178,1)",
                                data : [80000]
                            }
                        ]

                    }
                    window.onload = function(){
                        var ctx = document.getElementById("canvas").getContext("2d");
                        window.myBar = new Chart(ctx).Bar(barChartData, {
                            responsive : false
                        });
                    }

When I have one dataset with two data entries, each bar have its own label, but they have same color.

I need it to look like this: screenshot

Any advice?

2
chartschart.js

2 Answers

0
votes

I found solution:

var barChartData = {
                        labels : ["PRONÁJEM","TRVALÁ LICENCE"],
                        datasets : [
                            {
                                fillColor : "rgba(0,59,98,1)",
                                strokeColor : "rgba(0,59,98,1)",
                                highlightFill: "rgba(0,59,98,0.75)",
                                highlightStroke: "rgba(0,59,98,0.75)",
                                data : [30000, 80000]
                            }
                        ]
                    }
                    window.onload = function(){
                        var ctx = document.getElementById("canvas").getContext("2d");
                        window.myBar = new Chart(ctx).Bar(barChartData, {
                            responsive : false,  scaleShowHorizontalLines: false, scaleShowVerticalLines: false, scaleLabel : "<%= Number(value) + ' Kč'%>"
                        });
                        myBar.datasets[0].bars[1].fillColor = "rgba(179,178,178,1)";
                        myBar.datasets[0].bars[1].strokeColor = "rgba(179,178,178,1)";
                        myBar.datasets[0].bars[1].highlightFill = "rgba(179,178,178,0.75)";
                        myBar.datasets[0].bars[1].highlightStroke = "rgba(179,178,178,0.75)";
                        myBar.update();

                    }
0
votes

You can do this by setting an array of colors in your dataset instead of a single color. You can find it here in the documentation.

Your data configuration would then look similar to this:

var barChartData = {
    labels : ["Pronájem", "Trvalá licence"],
    datasets : [
        {
            backgroundColor : ["rgba(0,59,98,0.5)", "rgba(179,178,178,0.5)"],
            borderColor : ["rgba(0,59,98,0.8)", "rgba(179,178,178,0.8)"],
            hoverBackgroundColor: ["rgba(0,59,98,0.75)", "rgba(179,178,178,0.75)"],
            hoverBorderColor: ["rgba(0,59,98,1)", "rgba(179,178,178,1)"],
            data : [30000, 80000]
        }
    ]
}