chart.assignColor() doesn't work with individual bars

[RichardNeill]

I'm trying to apply assignColor() to a specific named bar (not to the entire series). This doesn't work. The reason this would be useful is to allow iteration over the entire data-set, and, for example, make any bar whose value is less than some threshold show up in red.

For example:

---- begin ----

----- end ----

In this example, I can successfully assign the green colour to both bars in series "Series1". This works, but it doesn't do what I want.

On the other hand, attempting to assign the red colour to the bar labelled "Hello" doesn't work - it does nothing.

Maybe the tag "Hello" is specified wrongly, and it should be something like ["Series1"]["Hello"] or "Word":"Hello" - if so, then please can we have some more documentation on exactly how the tag should be chosen? Thanks very much?

[RichardNeill]

What I actually wrote was:

---- begin ---
<div id="chartContainer">
<script>
var svg = dimple.newSvg("#chartContainer", 590, 400);
    var data = [
      { "Word":"Hello", "Score":30 },
      { "Word":"World", "Score":80 },
     ];

var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "Word");
chart.addMeasureAxis("y", "Score");
chart.addSeries("Series1", dimple.plot.bar);
//chart.assignColor("Series1", "green", "black", "1");  //does the wrong thing
chart.assignColor("Hello", "red", "black", "1");      //does nothing

chart.draw();
</script>
</div>
---- end ----

Sorry the issue tracker ate the html!

Meanwhile, there is a horrible hack that allows this to be worked around, by using Chrome's inspector to find out what d3 does to the DOM.

After calling chart.draw(), this will work: document.getElementById("dimple-series1-hello---").style.fill = "red";

[johnkiernander]

The first parameter of addSeries determines the dimension to colour by. In this case you need to do:

chart.addSeries("Word",` dimple.plot.bar);

Then your assignColor line will work.

If you want all the bars a single colour with just one highlighted you can additionally set the default colours to a single colour and just pick out the one(s) you want as above:

chart.defaultColors = [new dimple.color("#eeeeee", "#eeeeee", 0.8)];

[johnkiernander]

To make any bar whose value is below a threshold colour a certain way I would augment the data first. Something like this:

for (var i = 0; i < data.length; i += 1) {
    data["Colour Flag"] = data[i]["My Value"] < threshold ? "Bad Performance" : "Good Performance";
}

Then just put colour flag in the first parameter of add series:

chart.assignColor("Bad Performance", "red", "black", "1");
chart.assignColor("Good Performance", "green", "black", "1");
chart.addSeries("Colour Flag",` dimple.plot.bar);

[RichardNeill]

Thank you - that works really well - much appreciated.

May I suggest this is worth explaining a bit more in the documentation - it wasn't obvious to me that, for example, for "Hello" to be recognised as a valid tag, then "Word" had to be defined as the Series name. (Also, I like the "Augmentation approach).

P.S. Just for anyone else who comes across this thread, I think it should be data[i]["Colour Flag"] above, rather than just data["Colour Flag"]