.colors method for all charts about dc.js HOT 16 CLOSED

+1 for this functionality !

from dc.js.

+1

from dc.js.

just wondering if this is going to make it on the roadmap? Maybe you have a workaround?

I have a pie chart for products, and a stacked bar chart for the same products over time. It would be very nice if the colors matched, it is visually confusing the way it is today.

from dc.js.

Currently I have very limited bandwidth in the next a few months so unless someone else is going to contribute this feature will probably not make the roadmap for awhile. For now you can specify the pie chart color manually to match the bar chart css colors (or the other way around).

from dc.js.

can you point me at some sample code for that?

from dc.js.

try this on your pie chart:

chart.colors(["#a60000","#ff0000", "#ff4040","#ff7373","#67e667","#39e639","#00cc00"]);

from dc.js.

yes, i understand the .colors method, but how do I pull the colors for the bar chart and how do i deal with the ordering?

name dimension [{name:bob, value:3,ordinal:1},{name:jim,value:2,ordinal:1},{name:joe,value:3,ordinal:1},
{name:bob, value:2,ordinal:2},{name:jim,value:2,ordinal:2},{name:joe,value:3,ordinal:2}...]

so the pie is the sum of the values, the bar is stacked values by ordinal. How do I make sure name:bob = blue in both pie and stacked bar?

from dc.js.

also i've tried to use a style but the ordering of the elements isn't preserved (is this a problem with crossfilter?) so the colors don't match. I have 2 dimensions, each dimension has a pie and bar chart where the colors should match

from dc.js.

try something like this on your bar chart:

chart.selectAll("rect.stack0").attr("class", function(d){
    if(d.value.name == "bob")   
         return "blue-bar";
    else if(d.value.name == "jim")
         return "red-bar";
    ....
});

from dc.js.

Can you take a look at this: http://jsfiddle.net/greenail/ZddFh/41/

the first 2 charts match, the third doesn't

from dc.js.

Hmm... unfortunately the row chart currently does not use the ordering that you can specify on crossfilter group, so to enforce the coloring you have to do it manually:

rowChart.renderlet(function(chart){
    chart.selectAll("g.row rect").attr("fill", function(d){
        if(d.key=="s3")
            return "red";
        else if(d.key=="ec2")
            return "blue";
        else
            return "green";
    });
})

Honoring crossfilter group ordering might be something all charts should conform, and it might be introduced as an enhancement in future release.

from dc.js.

i get an error about row chart not having a renderlet method.

http://jsfiddle.net/greenail/ZddFh/47/

from dc.js.

Thats actually because ticks() does not return chart instance so your
chart3 is no longer a dc chart object:

http://jsfiddle.net/NickQiZhu/ZddFh/48/

On Fri, Apr 26, 2013 at 2:57 PM, jschoch [email protected] wrote:

i get an error about row chart not having a renderlet method.

http://jsfiddle.net/greenail/ZddFh/47/

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/26#issuecomment-17093891
.

from dc.js.

Thanks so much for the help, i have it close but when a render event gets triggered it goes back to the default colors for the pie chart, but not the others!?

http://jsfiddle.net/greenail/ZddFh/51/

from dc.js.

If you are using a colorChart e.g. pie chart or row chart, and if you have a custom data driven function to generate colors then the best way is to override the getColors function, see updated fiddle:

http://jsfiddle.net/NickQiZhu/ZddFh/59/

However your original solution should work, and I suspect there is a timing issue in renderlet invocation. [#164] created to address this issue.

from dc.js.

You should now be able to pass the same color scale to all color charts.

from dc.js.