I'm using d3.scale.threshold() to achieve color change that is correlated with a value, and I'm not sure how to flip colors, so that bar chart that is completely red will be positioned on the bottom of the chart, and bar chart that is mostly green is positioned on the top.
This is my Plunker.
Right now very top bar chart is completely red and positioned at the top. However, I would like it to see it on the bottom.
Any suggestions are appreciated.
This is the sort function you want:
data.sort(function(a, b) {
return d3.descending(b.total, a.total);
});
Here is your updated plunker: https://plnkr.co/edit/uyrf66RA6Qhc3bhOmdwH?p=preview
Related
I want to put the same legend top center of the chart. Legend items will be dynamic, likes sometimes 2,5 or 9, etc.
So, it should take space dynamically like how it is acting on the bottom.
I tried with inset functionality but it seems this is not looking better like the bottom one.
and there are few more complexity like I want it like a flat, so now if I define step size 3 then maybe, for now, it looks good for 9 items. but when there will be 2 items, it will show as a list!!
Although I solved that problem through the following solution:
// get parent elements
let parentEle = d3.selectAll("#chartID svg");
let childrenEle = parentEle
//Convert selection to selection representing the children
.selectAll(function () { return this.childNodes; })
.filter('g');
// putting legends position on TOP
d3.select(childrenEle._groups[0][2]).attr('transform', 'translate(0, 5)');
you have to keep eye on chart width - height and according to this, you may have to control padding in TOP for the chart.
might be this is not a good solution but it works fine for me :D
I'm learning D3 in Laravel and trying to use this color picking button:
<input type="color">
...to update the fill of the d3 bar chart at this link:
(https://bl.ocks.org/mbostock/3885304)
I have tried numerous solutions, including working with css objects and the answer here:
(Input type color styling)
I get the whole chart loaded on a page but the color picking button, which can change colors like in the answer on the other linked question, doesn't update the graph's fill. To clarify, I was sure to update "fill" and not "color". I'm new to D3 and js but not html and css. Color can be set by adding a line of the following, for example:
.attr("fill", "green");
... to the end of the code, but I want to see how to change the graph's bar fill by picking a color from the "input type" button.
Add a listener to the input for a change event. On a change, select all the bars, then set the fill to the new color.
d3.select("input")
.on("change", function() {
g.selectAll(".bar")
.style("fill", d3.select(this).property("value"))
});
I have a two column vertical bar chart.
I dont want the left hand bar to be flush with the Y axis.
So I used PaddingOuter() to specify an inset as follows:
var x = d3.scaleBand().rangeRound([0, width]).paddingInner(0.1).paddingOuter(0.5).align(0.1);
I works nicely.
Except that the right hand bar (its a two column chart) is also inset.
I only want the left hand bar inset.
Is there a solution to this..?
Start the range at the amount you want to offset by, e.g., rangeRound([10, width])
What are the properties that control the width of the X-axis labels on a horizontal bar RadChart? Here's what it looks like now:
I need the labels on the left to be wider.
I actually, just needed to keep the auto layout doing its thing, and disable auto wrapping this way:
var item = new ChartAxisItem();
item.Appearance.RotationAngle = AutoTextWrap.False
I am using jqplot to draw multiple lines of different line colors.
Also, I have legends whose colors should be in accordance with the corresponding line colors.
I seem to find no way to cope with the legend color.
So any hint?
Taken from the question title I understand you want to change the color of legend labels to correspond to the color of series, right?
For this reason, since the swatches which are just in front of the labels, we can use them to grab the color which we then set for the labels.
This is the bit of the code you need. You need to remember to put it before you draw your plot.
$.jqplot.postDrawHooks.push(function() {
var swatches = $('table.jqplot-table-legend tr td.jqplot-table-legend-swatch');
var labels = $('table.jqplot-table-legend tr td.jqplot-table-legend-label');
labels.each(function(index) {
//turn the label's text color to the swatch's color
var color = $(swatches[index]).find("div div").css('background-color');
$(this).css('color',color );
});
});
You could see the code running live here.