This project is read-only.

Bar Chart

Jan 12, 2011 at 5:48 PM


I've read a few threads relating to Bar Charts (dating back to 2009) and the consensus seemed to be that they will be added to D3. Has this been done yet? I really need to use a simple bar chart and a combined bar chart (with a line plot) but am unsure how to achieve this using D3. I am using windows forms (unavoidable for the project I'm working on) and an element host to wrap the wpf control. I've seen various links to workarounds for D3 (special markers?) but I don't understand how they work. Any advice would be much appreciated. I think D3 looks a very promising tool but I am frustrated by the absence of any documentation.....

Thanks in advance for any assistance.



Jan 12, 2011 at 8:51 PM

There is a bar chart sample. Search the source for "BarChart". This sample runs (for me, at least), with this version of D3, but the bars don't show up in the new version ( Don't know why.

It probably wouldn't be hard to do your own bars.

Hope this helps.


Jan 13, 2011 at 9:21 AM

Thanks for the info Jim. I have looked at this but am struggling to get it to build properly, In the meantime, could you possibly point me to anything that shows how to construct the bars - are they types of markers?

Thanks again



Jan 13, 2011 at 1:56 PM

Well when I said do your own bars, I meant create your own graph in which you draw bars. For example, I have a graph where I need to draw lines that are always cover 90% of the vertical space of the graph (5% space on either end). This class is derived from PointsGraphBase, and I override OnRenderCore(). In OnRenderCore() I clear the canvas and then create the lines (which would be rectangles, in your case). Here's the snippet of code where I am determining the xy coordinates for the top and bottom of the line.

            CoordinateTransform transform = GetTransform();




             double x = convertToDouble(time);
             double y = .05;
             Point point = new Point(x, y);

             Point screenPoint = point.DataToScreen(transform);

             line.X1 = screenPoint.X;
             line.Y1 = screenPoint.Y;

             point.Y = .95;
             screenPoint = point.DataToScreen(transform);
             line.X2 = screenPoint.X;
             line.Y2 = screenPoint.Y;

My horizontal axis is a date/time axis. I took an existing derived class as my model for this, but I don't remember which one.

This is kind of low level work to do a bar chart, I admit. It would be better to get the example working. It can be a little frustrating working with D3, it's very powerful, but there's little documentation or guidance. Sometimes when Mike makes changes to the library, he doesn't update the samples right away, and they are broken. 

There's a better chance Mike will answer your question if you post it on



Jan 14, 2011 at 5:57 PM

Thanks for your assistance Jim.