Flot Charts

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. Read the Official Flot Documentation for new updates, instructions and other options.

Bar Chart

Flot supports bars and any combinations of these, in the same plot and even on the same data series.

$.plot('#flotBar', [{
  data: flotSampleData1,
  color: '#506fd9'
}], {
  series: {
    bars: {
      show: true,
      lineWidth: 0,
      barWidth: .5,
      fill: 1
    }
  },
  grid: {
    borderWidth: 1,
    borderColor: '#edeff6'
  },
  yaxis: {
    max: 60,
    tickColor: '#edeff6',
    ticks: 4,
    font: {
      color: '#001737',
      size: 10
    }
  },
  xaxis: {
    max: 30,
    tickColor: '#edeff6',
    font: {
      color: '#001737',
      size: 10
    }
  }
});

Stacked Chart

With the stack plugin, you can have Flot stack the series. This is useful if you wish to display both a total and the constituents it is made of.

series: {
  stack: 0,
}

Line Chart

Flot supports lines and any combinations of these, in the same plot and even on the same data series.

series: {
  lines: {
    show: true,
    lineWidth: 2
  }
}

Area Chart

Flot supports area and any combinations of these, in the same plot and even on the same data series.

series: {
  lines: {
    show: true,
    lineWidth: 0,
    fill: 1
  }
}

Thresholds

With the threshold plugin, you can apply a specific color to the part of a data series below a threshold.

series: {
  threshold: {
    below: 0,
    color: '#a8b5c3'
  }
}

Percentiles

For each point of a filled curve, you can specify an arbitrary bottom. As this example illustrates, this can be useful for plotting percentiles.

Crosshair

You can add crosshairs that'll track the mouse position, either on both axes or as here on only one.

crosshair: {
  mode: 'xy'
}

Pie Chart

The default pie chart with no options set.

$.plot('#flotPie', pieData1, {
  series: {
    pie: {
      show: true
    }
  }
});

Donut Chart

The default pie chart with a donut hole option added.

$.plot('#flotDonut', pieData1, {
  series: {
    pie: {
      innerRadius: 0.5,
      show: true
    }
  }
});