Awesome charts for AngularJS.
1 person uses it
Author: 86094786347d156841a008c5686e50a5?d=https%3a%2f%2fidenticons.github.com%2ff633a0278e2af18ab29dbc973c43e0ad n3-charts
Submitted by: E757c8308cb1a289a67d6b09e5b4498a?d=https%3a%2f%2fidenticons.github.com%2f92646be9a448bd02e97d32321d5e2e95 lorem--ipsum

n3-charts.line-chart Build Status

A line chart implementation for AngularJS applications. It makes an extensive use of the wonderful D3.js library.

And here is the demo page.

How to install

  • Copy line-chart.min.js wherever you want
  • Reference it in your index.html file
  • Reference the module in your app file : angular.module('myApp', [ 'n3-charts.linechart' ])

How to use

A line chart is called using this syntax :

The line chart directives needs two attributes : data and options. If one is missing, nothing happens.


Your data should look like this :


Options must be an object with a series array. It should look like this :


The axes keys can be undefined. Otherwise, it can contain an key with the following properties :

  • key : optional, defines where the chart will look for abscissas values in the data (default is 'x').
  • tooltipFormatter : optional, allows to format the tooltip. Must be a function that accepts a single argument, the x value. It should return something that will be converted into a string and put in the x tooltip.
  • type : optional, can be either 'date' or 'linear' (default is 'linear'). If set to 'date', the chart will expect Date objects as abscissas. No transformation is done by the chart itself, so the behavior is basically D3.js' time scale's.
  • labelFunction : optional, allows to format the axis' ticklabels. Must be a function that accepts a single argument and returns a string.

It can also contain, according to your series configuration, a y and a y2 key with the following properties :

  • type : optional, can be either linear' or 'log' (default is 'linear'). If set to 'log', the data may be clamped if its computed lower bound is 0 (this means the chart won't display an actual 0, but a close value - log scales can't display zero values).

The series key must be an array which contains objects with the following properties :

  • y : mandatory, defines which property on each data row will be used as ordinate value.
  • color : optional, any valid HTML color (if none given, the chart will set it for you).
  • label : optional, will be used in the legend (if undefined, the y value will be used).
  • axis : optional, can be either 'y' (default, for left) or 'y2' (for right). Defines which vertical axis should be used for this series. If no right axis is needed, none will be displayed.
  • type : optional, can be one value between 'line', 'area', 'column'. Default is 'line'.
Optional stuff

Additionally, you can set lineMode to a value between these :

  • linear (default)
  • step-before
  • step-after
  • basis
  • basis-open
  • basis-closed
  • bundle
  • cardinal
  • cardinal-open
  • cadinal-closed
  • monotone

For more information about interpolation, please consult the D3.js documentation about that.


Fetch the repo : sh $ git clone https://github.com/angular-d3/line-chart.git

Install stuff : sh $ npm install

Install moar stuff : sh $ bower install

Install teh uterz stuff : sh $ grunt



AngularJS is designed to be testable, and so is this project. It has a good coverage rate (between 85% and 95%), and we want to keep it this way.

comments powered by Disqus
This page was last updated over 3 years ago.