How to show sparklines in AngularJs

by Virender
February 12, 2015

How to Show Sparklines in AngularJs
How to Create Sparklines Directive in AngularJs

In this example I am showing sparklines with the help of directives.

Plunker URL –


<!DOCTYPE html>
<html ng-app=”SparkLineApp”>
    <title>Use JQuery Sparklines in AngularJs</title>
    <script src=””></script>
    <script src=””></script>
    <script src=””></script>
    <script src=”app.js”></script>

    JQuery Sparklines with AngularJs

    <div ng-controller=”sparkLineController”>
        <div style=”width:200px;”>
            <sparklinechart data=”{{Customers}}”></sparklinechart>


 var sparkApp = angular.module(‘SparkLineApp’, []);

sparkApp.directive(“sparklinechart”, function () {

    return {
        restrict: “E”,
        scope: {
            data: “@”
        compile: function (tElement, tAttrs, transclude) {
            tElement.replaceWith(“<span>” + + “</span>”);
            return function (scope, element, attrs) {
                attrs.$observe(“data”, function (newValue) {
                    element.sparkline(‘html’, { type: ‘line’, width: ‘96%’, height: ’80px’, barWidth: 11, barColor: ‘blue’ });

sparkApp.controller(‘sparkLineController’, function ($scope) {

    $scope.Customers = “4,6,8,10,5”;


One thought on “How to show sparklines in AngularJs

  1. Ajay Oza says:

    Thanks for this post. I used the same directive but am having issues in Chrome only, see question on SO:

    Any help greatly appreciated. Ajay

Leave a Reply

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