cdb cdb - 1 month ago 25x
AngularJS Question

Render a d3 pie chart in angular with angular-nvd3

I want to render an d3 pie chart in angular with angular-nvd3. I have no errors and all of the associated scripts are loading.

I'm not sure how to call the function inside of the directive--
The supplied directive is:

<nvd3 options='options' data='data'></nvd3>

which I changed to:

<nvd3 options='vm.options' data=''></nvd3>


<div ng-controller='MainController'>
<nvd3 options='vm.options' data=''></nvd3>


(function (angular) {
'use strict';
.module('blah').controller('MainController', MainController);

function MainController () {
var vm = this;

vm.initSampleData = initSampleData; // set up the var

function initSampleData() {
vm.options = {
'chart': {
'type': 'pieChart',
'height': 500,
'showLabels': true,
'duration': 500,
'labelThreshold': 0.01,
'labelSunbeamLayout': true,
'legend': {
'margin': {
'top': 5,
'right': 35,
'bottom': 5,
'left': 0
}; = [
{key: 'One', y: 5},
{key: 'Two', y: 2},
{key: 'Three', y: 9},
{key: 'Four', y: 7},
{key: 'Five', y: 4},
{key: 'Six', y: 3},
{key: 'Seven', y: .5}


Route (not using directive, getting ready for angular 2.0) if i add
MainRoute.$inject = ['$routeProvider', 'nvd3']; it errors...

function MainRoute($routeProvider){
$routeProvider.when('/', {
controller: 'MainController as vm',
templateUrl : 'main.html',
bindToController: false


I think you need to make an alias to your controller, and it will solve your problem.

<div ng-controller='MainController as vm'>

You assigned data to controllers object, but in view, before you will give your controller alias it could be called by its own name, so before you add alias it was, after you add it like I mentioned before it will be -

Hope it will help you


Here is Plunker with working code. Your problems was:

  • You did not init angular module with ng-app="yourModule"
  • You inserted routing but did not use <ui-view> to make them know where it should be used