Question

So I have something like this image on the screen:

I have looked at the examples for creating a bar chart but the problem I am having is charting from negative, to zero to positive. I am wondering if each row should be 3 bars (negative to zero, the average dotted rect and then from the average to the max).

This is kind of like a candle stick chart but horizontal.

Any help would be much appreciated.

Here is a fiddle with what I’ve achieved so far: http://jsfiddle.net/jLjPz/

Answer 1

I’ve modified your jsfiddle to make it look similar to the image you provided. A few things to note about my changes:

http://jsfiddle.net/jLjPz/3/

For linear scales, you can feed a negative and positive number into the array. So instead of using .domain([0,100]), you should use .domain([-100,100]).

You can use this scale to map your d[0] and d[1] so that when the rectangle is drawn is will appear correctly sized with your axis.

Finally, I did a bit of math to take your [start, width] values to make them work nicely with the scale.

x(d[0]) is the correctly scaled position-left of each rectangle.
x(d[1]+d[0])-x(d[0]) is the correctly scaled width of each rectangle.
x(d[1]+d[0])-x(d[0]))/2+x(d[0]) is the correctly scaled midpoint of the rectangle.

Hope this helps!