I'm using dc.js which sits on top of D3. Problem is all my charts have the same color bars like:
Its not easy to set the domain for different colors because none of my charts are static and the values on x/y axis could always be different. How could I just tell the chart to dynamically change the colors for each group? The example above code looks like:
var chart = dc.barChart(elm);
chart.barPadding(0.1)
chart.outerPadding(0.05)
chart.brushOn(false)
chart.x(d3.scale.ordinal());
chart.xUnits(dc.units.ordinal);
chart.elasticY(true);
chart.width(250).height(250)
chart.render();
I've tried adding something like:
chart.range(colorbrewer.RdBu[9]);
but then all the charts turn the same color too.
Thanks!
I believe you want something like:
chart.colors(d3.scale.category20b());
to assign a color to each bar. If you want the color that's selected to be based of the value of the bar's data:
chart.colorAccessor(function(d, i){return i;})
These methods and more are documented here: https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#color-mixin
Related
to visualize data I am using a heatmap from the plotly.js library. After rendering the heatmap I want to be able to dynamically change the axis limits. So far I manage to do that for the z-axis (color) but not for the x- or y-axes.
Here is what I try:
layout.xaxis.range=[0,5];
layout.yaxis.range=[0,5];
data[0].zmin=0;
data[0].zmax=10;
Plotly.redraw('myDiv');
Sadly only the z-axis works. You can check an example here: https://codepen.io/brockerdocker/pen/QWgvLGx
Here is what I get (only z-limits changed):
And here is what I would like to get (also x- and y- limts changed):
However this 2nd heatmap I can only achieve if I specify x- and y-ranges before I call Plotly.newPlot('myDiv', data, layout);. Once I generated the heatmap it seems that I can't change the ranges anymore.
So any idea how I could still change the ranges after having generated the heatmap would be great.
I just found the solution:
In order to being able to set a dedicated range for the x- and y-axes one first has to set 'autorange' to false:
layout.xaxis.autorange=false;
layout.yaxis.autorange=false;
layout.xaxis.range=[0,5];
layout.yaxis.range=[0,5];
Plotly.redraw('myDiv');
So that should work.
I have a stacked bar chart as follows:
I want to draw a horizontal line that goes through all the bars of a specific color on hover. Basically, if I hover on the following purple/mauve color, I want the following:
I looked alot in online as well as the documentation, but couldn't find anything.
Any help is really appreciated; thank you!
In theory you should be able to pre-render 5 line charts in addition to your stacked bar chart. Give each line chart a unique id or class html attribute, and each segment of a specific color needs a corresponding html classname, eg 'chartSegmentPurple' (actually it would be better to name the class based upon what the color represents, eg 'chartSegmentEconomicInequality'). Keep each line chart hidden. Give your chart an event listener for hover, then in the event handler get the classname. Use the classname to make visible the corresponding line chart.
We are using this chart. I see there is no property available to customize the colors of the pie chart.
Is there a way to customize the colors ?
Also how can we enable legend for this (if we could display legend in the bottom of the graph, it could be great. i.e like this )? and display only percentage on the graph?
To make the graph exploded, i see we need to use ["pulled": true] in the dataProvider. Instead of providing it inside the dataProvider, is there a way to provide somewhere outside ?
There are two ways to customize colors
1) Use the colorField and define the colors directly for individual slices.
2) Set your own theme by modifying the colors array or create your own theme.
Legends are enabled by setting an empty legend object in the chart config. You can find further configuration properties in the documentation. You can even change the value label to use percentages by modifying the valueText property. There's also an example of a pie chart with the legend set up and a completely custom legend.
If you want to change the pie slices labels, change the labelText.
As for your last question, no - it's using pulledField to specify which slices are pulled out in your data. There isn't a setting to explode the entire chart without it.
I am trying to create a line chart in d3.js.The color of the axes for this chart would be available only at runtime and can vary in a vast set of colors.It is possible to set the colors for the axes using css classes like this.
But since the range of colors that my chart can take is vast and only available at runtime, its not feasible to use this solution.Using call(yAxis).style("stroke",userColor) sets the color for the font use on axes labels and ticks but not the color of axis itself.
Is it possible to set the color of axis in d3.js axis dynamically using javascript?
I think the what you might want is something like the following:
d3.selectAll('.axis path')
.style("stroke", userColor)
.style("fill", userColor)
In this case, .axis path should be some identifying css on your axis lines (possibly put in with d3 as well in your yAxis function). You probably only need one of fill and stroke, try it out to see what works for you. This should operate on the actual axis line, rather than the text element
So I have a ColumnChart and one of the built-in functionality is that you can hover over an item (so called category) in the legend of the chart and you get some highlight-border around the corresponding columns in the chart.
Now I have many columns and categories in my chart and a highlighted series/category is very hard to see, because the default behavior just shows a 1px gray border around the columns. My columns are only a few pixels width and I still need to differentiate 10 different categories (=colors). So picking only very light colors (where the border would be easy to spot) is no option. I've found no way of changing:
The style of the highlight-border (primarily the color) or
The color of the columns (fill color) when their respective category is selected in the legend.
Is there some property I can pass to the draw() call of my chart to change the highlighting? Do I have to manually override some events/methods?
Help is highly appreciated!
In the past I used some CSS hacks to change some properties of the generated SVG (path, rect, etc...)
you can play around with advanced selectors and maybe you'll be able to achieve you what you want.
I created a very quick and buggy example, but maybe it will point you on the right direction.
For example:
div.google_chart svg g g g g rect {
stroke-width:0px; fill:red;
}
Hope it helps.