DimpleJS barchart styling columns

Question

I'm basically using a modified version of : http://dimplejs.org/advanced_examples_viewer.html?id=advanced_bar_labels .

I'd like to be able to add for each value a border on the left as high as the value (with a specific color for that border).

I'm not really sure where to start for adding that.

Any ideas?

Thanks.

More details : This is what I'd like to obtain : https://dl.dropboxusercontent.com/u/2227188/Image%202.png - the border on the left is the issue. (jsfiddle.net/mkzTk/5/ this what I currently have which is pretty much what's in the example - I don't know where to start really for adding a border)

Answer 1

You could append a rectangle after drawing for each element of the series as follows:

mySeries.afterDraw = function (s, d) {
    var shape = d3.select(s);
    svg.append("rect")
        .attr("x", shape.attr("x"))
        .attr("y", shape.attr("y"))
        .attr("height", shape.attr("height"))
        .attr("width", "10px")
        .style("fill", shape.style("stroke"))
        .style("pointer-events", "none"); 
};

The example you mention already uses the afterDraw function so just add the contents above to the existing method for labelling.

It looks nice, here's an example:

http://jsbin.com/lorin/9/edit?js,output#J:L20

Answer 2

I would set up each bar + edge pair as its own group based on a certain data point, and then append two rect elements to that group. Differences in color can be used to give them their distinctive colors.

Your code would look something like this:

var monthBars = d3.selectAll('.monthBar') //These will be for each chart
 .data(allMyData, idFunction) //Assign and key your data
 .enter()
 .append('g')
 .classed('monthBar', true);
 .each(function(d){

   var taskGroups = d3.select(this).selectAll('.taskGroup')
    .data(d.dataForThisMonth, taskIdFn)
    .enter()
    .append('g')
    .classed('.taskGroup', true);
    .attr('transform', ...) //Define the x and y positioning for the group

   taskGroups.append('rect')
    //Make this the 'body' rect with the text in it

   taskGroups.append('rect')
    //Make this the edge rect
 })