Chart.js – Second bar, with another label and different colors

👍:0

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

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]
        }
    ]
}

Leave a comment