<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://rawgit.com/n3-charts/line-chart/master/build/line-chart.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-xs-12 col-md-6">
Some bigger div
</div>
<div class="col-xs-6 col-md-3">
<linechart data="data" options="options" height="250"></linechart>
</div>
<div class="col-xs-6 col-md-3">
<table class="table table-striped">
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in data">
<td>{{ d.x }}</td>
<td>{{ d.value }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
var app = angular.module('plunker', ['n3-line-chart']);
app.controller('MainCtrl', function($scope) {
$scope.data = [{x: 0, value: 12}, {x: 1, value: 15}, {x: 2, value: 23}];
// Column
$scope.options = {
tooltip: {mode: 'scrubber'},
lineMode: 'cardinal',
tension: 0.3,
series: [
{y: 'value', type: 'area'}
]
};
});