This directive lets you use jqPlot with Angular
3 people use it
Author: Assets.github.com%2fimages%2fgravatars%2fgravatar-org-420 angular-ui
Submitted by: 1703387?v=2 wesleycho

ui-chart directive Build Status

This directive allows you to add a jqPlot graph to your application.


  • AngularJS
  • jQuery
  • jqPlot


We use karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:

The karma task will try to open Chrome as a browser in which to run the tests. Make sure this is available or change the configuration in test\test.config.js


We use bower for dependency management. Add

To your bower.json file. Then run

This will copy the ui-chart files into your bower_components folder, along with its dependencies. Load the script files in your application:

Add the chart module as a dependency to your application module:

Apply the directive to your div elements as an element, attribute, class, or comment:

Your data to pass to $.jqplot will be the evaluated value of the ui-chart attribute, while the options to pass to $.jqplot will be the evaluated value of the chart-options attribute - the evaluations are done in scope.


This plugin supports usage of any option present for a chart in jqplot. This value will be provided by the evaluated value in scope on the chart-options attribute.

comments powered by Disqus
This page was last updated about 5 years ago.