Search code examples
javascriptjquerychartsbar-chartflot

Flot Multi Axes Bar Chart with orderbars and categories plugins

I've created a bar chart with Flot that uses two sets of data on one chart. Each set has it's own y-axis. I want the bars to be placed side-by-side, however when the chart is drawn, they overlap.

enter image description here

I tried using the orderbars plugin like so

{ data: d1, bars: {order: 1}, label: "Merchant Vol",  },
{ data: d2, bars: {order: 2}, label: "Residual Pmt", yaxis: 2}

but this results in the bars not rendering. I also use the categories mode / plugin.

I suspect it's a problem with using two y-axes. Is there a way to plot bar charts with multiple axes without the bars overlapping? Fiddle with code here.

Solution

  • The orderbars plugin is not compatible with the categories plugin. It works by moving each bar a little from its original position (e.g. the bar at x value 1 is shifted to 0.9 for one data series and to 1.1 for the other). That doesn't work when you have Jun-16 as x value.

    The solution is to remove the categories plugin, use numeric x values and set the x axis ticks yourself. See the updated fiddle here.

    enter image description here