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}}