Bar chart plugin for Flot

Flot side by side bars plugin

As you can see on this example, there are three bars for the same x value. Bars are side by side located. But for each bar the tooltip display the right x value.

Vertical bars



Horizontal bars


Download plugin


  • 2010-09-20 : Bug correction & Refactoring
  • 2011-10-27 : Horizontal bar add





  1. Alex


    I found a missing semicolon at the end of orderbars plugin.
    It is:


    it should be :


    I’ve noticed this when I was obfuscating my code.

    • admin

      try something like :

      $(function () {

      var d1 = [];
      for (var i = 0; i < = 10; i += 1) d1.push([i, parseInt(Math.random() * 30)]); var d2 = []; for (var i = 0; i <= 10; i += 1) d2.push([i, parseInt(Math.random() * 30)]); var ds = new Array(); ds.push({ data:d1, bars: { show: true, barWidth: 0.2, order: 1, lineWidth : 2, color : #ff0000
      bars: {
      show: true,
      barWidth: 0.2,
      order: 2,
      color : #00ff00

      //Display graph
      $.plot($(“#placeholder1″), ds, {


  2. kondareddy

    Hi i want to design side by side bars and stacked(same as above example but it shoulb stacked one above the other) using flot plugin can you help me how i can pass the json data as input fot the side by side and stacked bar. pls help me on this, thnks in adv.

  3. German

    Hi, this is an excellent plugin but it doesn’t allow to change colors.
    I’ve seen the answer above but no luck, I’ve tested it with the same from this demo and doesn’t work.

    I hope you can find a workaround for this or add a pretty simple demo with other colors to use as a reference.

    Thanks and keep up the good work!

Leave a Reply

Your email address will not be published. Required fields are marked *