A line chart implementation
0 people use it
Author: angular-d3
Submitted by: E757c8308cb1a289a67d6b09e5b4498a? 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 examples page.

How to install

  • Copy line-chart.js and line-chart.css wherever you want
  • Reference them 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 :

Note : only x is supported as an abscissas key.


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

Series definition

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 : mandatory, any valid HTML color.
  • 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.


AngularJS is designed to be testable, and so is this project.

This will install karma (and other stuff, I guess)

And this will run the awesome karma testrunner. In the also awesome PhantomJS headless browser. There is so much awesomeness in here.

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