Chart.js: Bar Chart - Each bar with different color.

[abhijitsinha]

Can the bar-chart accept data like the pie-chart or radar-chart, each bar to have different color.

Can it be done using the data format of the bar-chart, with unique data-set for the each bar can be done, constraint is with the labels array.

var data = {
labels : ["Quarter1"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [50]
}
]
}

can we take the label inside the datasets?

Is there a way to do this, or i need to hack a way around this?

[nnnick]

That's a bit of an awkward one to fit into the current data model without making some big breaking changes.

I think the best way for doing something like this would be to have a different chart type for handling something like this, with only a single data set.

Do you think that would be a better solution?

[pmendelski]

+1

[abhijitsinha]

Thanks for your response, yes i thought so, as i looked into JS code of the plugin, but would be handy feature. But indeed a great plugin, i would go ahead with FLOT, as its possible there.

[paulmsmith]

Aww. I needed this too. Hoping there was a fix.

[martypowell]

If you take a look at this library https://github.com/FVANCOP/ChartNew.js/ which builds upon Chart.js you can do this by passing the values in as an array like so:

var data = {
    labels: ["Batman", "Iron Man", "Captain America", "Robin"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: ["rgba(220,220,220,0.5)", "navy", "red", "orange"],
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [2000, 1500, 1750, 50]
        }
    ]
};

[paulmsmith]

Thanks @martypowell that looks like it might do the trick! :+1:

[LAKnoKAL]

I needed this! +1

[raavanan]

@martypowell that did the trick for thank you

[webbieram]

Go with this it will definitely help you.

window.onload = function(){
    var ctx = document.getElementById("myChart").getContext("2d");
     window.barFill = new Chart(ctx).Bar(business, {
    scaleShowGridLines : false,
    responsive : true
 });

    barFill.datasets[0].bars[0].fillColor = "rgb(239,98,69)";
    barFill.datasets[0].bars[1].fillColor = "rgb(239,70,91)";
    barFill.datasets[0].bars[2].fillColor = "rgb(61,59,66)";
    barFill.update();
}

[NiyuAvril]

@ramtml thanks in advance, but how to set the color when it's hover?? :)

[mr-wildcard]

highlightFill ?

[tannerlinsley]

V2.0 does all of this natively. See the examples!

[LittleRolex]

Nick, the barFill.datasets[0].bars[0].fillColor approach works great, except it resets following tooltip / hover activation. Is this a feature or issue? Is there a work-around?

Thanks in advance and Cheers!

Jody

[Inlesco]

This is a long-time issue as the the fillColor of a bar overrides on bar's hover.

Also, it's impossible to set an individual bar fillColor depending on bar's label in the array we pass through "labels" key before datasets.

Will there ever be an improvement in this or it's better to simply use something else?

[kAlvaro]

FYI:

• It isn't mentioned yet in the documentation
• In the stable release v1.0.2, the enhancement can be found at src/Chart.Bar.js but neither Chart.js nor Chart.min.js seem to include it (files in master branch are fine)

[tannerlinsley]

This is possible along with a lot of other improvements in version 2.0, set
to launch in the coming weeks.
On Wed, Mar 30, 2016 at 11:13 AM Álvaro G. Vicario [email protected]
wrote:

FYI:

• It isn't mentioned yet in the documentation
• In the stable release v1.0.2, the enhancement can be found at
  src/Chart.Bar.js but neither Chart.js nor Chart.min.js seem to include
  it (files in master branch are fine)

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
https://github.com/nnnick/Chart.js/issues/128#issuecomment-203507353

[kAlvaro]

This is possible along with a lot of other improvements in version 2.0

I assumed 1.0.2 already has it and it was a build error. In fact I've just upgraded to latest master and I'm definitively using arrays in fillColor :-?

[tannerlinsley]

Yeah. Some of the breaking chages in 2.0 are a move to css-like style
properties. So in this case you'll want to pass an array of colors to
backgroundColor instead of fillColor

On Wed, Mar 30, 2016 at 1:30 PM Álvaro G. Vicario [email protected]
wrote:

This is possible along with a lot of other improvements in version 2.0

I assumed 1.0.2 already has it and it was a build error. In fact I've just
upgraded to latest master and I'm definitively using arrays in fillColor
:-?

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
https://github.com/nnnick/Chart.js/issues/128#issuecomment-203568696