Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including angular-flot with all npm packages installed. Try it out:

var angularFlot = require("angular-flot")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

angular-flot v0.0.17

An Angular directive to wrap Flotcharts.


Bower npm License

An Angular directive that wraps Flotcharts.


This library is provided as a Bower component and NPM module:

  • Bower: bower install angular-flot
  • NPM: npm install angular-flot

How to Use

First, make sure to add Flotchart to your project, as explained in Flotchart's ReadMe since we don't bundle Flotcharts for you.

Add angular-flot to the list of dependencies in your Angular.JS application:

angular.module('myapp', [
    // ...

In your controller, create two variables to hold the dataset and Flot chart options:

angular.module('myapp').controller('MyController', function ($scope) {
    $scope.myData = [];
    $scope.myChartOptions = {};

In your view or template, add the flot directive, making sure to specify both the dataset and options attributes, pointing to the scope variables defined above:

<flot dataset="myData" options="myChartOptions"></flot>

The Flot chart is created in a div element as a child of the flot directive. To select the DOM element using jQuery, just do as follows (you might have to adjust the example based on the contents of your page):

$('flot > div');


Directive attributes:

  • dataset: Name of a variable defined in the current $scope to be used as input dataset. See for more information.
  • options: Name of an object defined in the current scope used to configure the chart. See for more information.
  • on-plot-click: callback function for the 'plotclick' event.
  • on-plot-hover: callback function for the 'plothover' event.
  • on-plot-selected: callback function for the 'plotselected' event.
  • width: Chart width, e.g.: "100%" or "350px".
  • height: Chart height, e.g.: "100%" or "100px".
  • callback: callback function with flot object.


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free