Fork me on GitHub

This page is not maintained anymore, please refer the documentation on github readme.

angular directives for commonly used d3 charts

Charts make data easy, coding them should not be hard

Chart type: Radius Legend Position:

Chart type: {{chartType}}
Config:

      Series:
      

      Sample data:
      

    
You can also try out angular-charts in plunkr playground.

Features


Installation

Installation is very straight forward. Grab the latest zip from github. Copy angular-chart.min.js in your root, and refer it in your page.

<script type='text/javascript' src='path/to/js/angular-charts.min.js'></script>

Add as dependency in your module

angular.module('yourApp', ['angularCharts']);

Dependencies

Install using bower

bower install angular-charts

Refer all dependencies in your page in right order

<script type='text/javascript' src='./bower_components/angular/angular.min.js'></script>
<script type='text/javascript' src='./bower_components/d3/d3.min.js'></script>
<script type='text/javascript' src='./bower_components/angular-charts/dist/angular-charts.min.js'></script>


Configuration

Directive syntax

<div ac-chart="chartType" ac-data="data" ac-config="config" id='chart' class='chart'></div>

Note: chartType, data and config are properties of scope. Not the actual values.

Attribute Type Values
ac-chart string 'pie', 'bar', 'line', 'point', 'area'
ac-config object
            
var config = {
  title: '',
  tooltips: true,
  labels: false,
  mouseover: function() {},
  mouseout: function() {},
  click: function() {},
  legend: {
    display: true,
    //could be 'left, right'
    position: 'left'
  },
  innerRadius: 0, // applicable on pieCharts, can be a percentage like '50%'
  lineLegend: 'lineEnd' // can be also 'traditional'
}
        
      
ac-data array Refer data section for more details
Config options
Property Type Description
title string Title for the chart
tooltips bool turn on/off tooltips
labels bool turn on/off labels for data points
legend object configures legend
legend.display decides if to show the legend
legend.position decides where to show the legend (left or right)
mouseover, mouseout, click function Refer events section for more details
innerRadius string/number configures radius on Pie charts.
can be used as string for percentages. ex: '50%'
lineLegend string allows to overried line graphs legend position.
can be either 'lineEnd' or 'traditional', defaults to 'lineEnd'

Data

Data structure is very simple, it is divided in two root level objects series and data
Series
Series is an simple array of strings

  Data
  

  

x defines what goes on x axis, must be a string

y defines what goes on y axis, must be an array of numbers. These values are mapped to series by index. y[0] belongs to series[0], y[1] belongs to series[1] and so on.

tooltip is optional

Entire data structure looks like this

  

Note: series and data are arrays


Events

Three events are exposed via config objects.
        
click : function(d) {
  $scope.messages.push('clicked!');
},
mouseover : function(d) {
  $scope.messages.push('mouseover!');
},
mouseout : function(d) {
  $scope.messages.push('mouseout!');
}
        
      

{{m}}