Chartjs-Can I color the first bar in "Bart Char" differently?

by

1👍

✅

You can do this with the standard chart.js library and just with one dataset.

Just create your chart using new Chart() and passing the returned object to a variable, then change whatever properties you wish to display differently, and use the update() method to refresh the chart.

Something like this will do :

var myBarChart = new Chart(document.getElementById("barChart").getContext("2d")).Bar(ChartData, ChartOptions);

// Change 1st bar (bars[0]) to red (display).
myBarChart.datasets[0].bars[0].fillColor = "rgba(255,0,0,0.7)";
myBarChart.datasets[0].bars[0].strokeColor = "rgba(255,0,0,1)";
// Change 1rd bar to red (highlight setting on mouse over)
myBarChart.datasets[0].bars[0].highlightFill = "rgba(212,10,10,0.7)";
myBarChart.datasets[0].bars[0].highlightStroke = "rgba(212,10,10,1)";

myBarChart.update();

See a jsFiddle DEMO of this here.

See the documentation regarding available methods here.

0👍

I’ve created a fork of chart js (https://github.com/leighquince/Chart.js) which has an option that can be passed to bar charts to overlay the bars, called overlayBars. You could use this feature and define two data sets, one with the the “your score” and the other with all the others.

var overlayData = {
    labels: ["Your Score", "February", "March", "April", "May", "Jun", "July"],
    datasets: [{
        label: "My Firstdataset",
        fillColor: "rgba(121,187,205,0.5)",
        strokeColor: "rgba(121,187,205,0.8)",
        highlightFill: "rgba(121,187,205,0.75)",
        highlightStroke: "rgba(121,187,205,1)",
        data: [44, null, null, null, null, null, null]
    }, {
        label: "My Second dataset",
        fillColor: "rgba(131,137,235,0.5)",
        strokeColor: "rgba(131,137,235,0.8)",
        highlightFill: "rgba(131,137,235,0.75)",
        highlightStroke: "rgba(131,137,235,1)",
        data: [null, 23, 66, 33, 55, 44, 101]
    }]
};



var myBarChart = new Chart(document.getElementById("canvas").getContext("2d")).Bar(overlayData, {

    overlayBars: true,


});
<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>
<div style="width:30%">
    <div>
        <canvas id="canvas" height="250" width="400"></canvas>
    </div>
</div>

fiddle (http://fiddle.jshell.net/leighking2/x7d1u38L/)

Leave a comment