How to draw a simple bar chart where each bar is of different color?

Question

Dimple's website shows an example[1] of a simple bar chart where both,xvalues and y values come from two variables:

[{x:<height val>, y:<bar location>},
{x:<height val>, y:<bar location>},
{x:<height val>, y:<bar location>},
{x:<height val>, y:<bar location>}]

This chart displays one bar for each element in the array and the location and height are described by that element. This seems to assume that there will be a large number of bars and there doesn't seem to be a way of giving different color to each bar (also different entry in the legend).

My data looks more like this:

{jimmy:26, tommy:34, jenny:54, bobby:12}

I'd like to display a chart with four bars, each bar with a different color. I'd like to be able to add a legend where the color corresponds to the name.

How can I do this? I've messed around with adding a non-null addSeries parameter, but I can't get it to show more than two values. Any ideas?

[1]http://dimplejs.org/examples_viewer.html?id=bars_vertical

Answer 1

Here is a plunker with the solution you are looking for...with key code additions below:

var names = myChart.addSeries(["name"], dimple.plot.bar);
myChart.addLegend(10, 50, 510, 20, "middle", [names]);