vanilla-line-chart is an easy-to-use JavaScript library for creating beautiful charts in plain JavaScript and it is built on top of D3.js.
This a vanillaJS Version of n3-line-charts and still under heavy development. Go check out our well tested AngularJS directive instead.
You can install vanilla-line-chart by forking this repo.
git clone [email protected]:n3-charts/line-chart-vanilla.git
cd line-chart-vanilla
npm install
gulp
Next, you need to reference LineChart.js and LineChart.css in your index.html file.
<script src=".tmp/build/LineChart.js"></script>
<link rel="stylesheet" href=".tmp/build/LineChart.css">
Here is an example how your HTML file should look like.
<!doctype html>
<html ng-app="app">
<head>
<!-- Reference AngularJS and D3.js -->
<script src="node_modules/d3/d3.min.js"></script>
<!-- Reference vanilla-line-chart -->
<script src=".tmp/build/LineChart.js"></script>
<link rel="stylesheet" href=".tmp/build/LineChart.css">
</head>
<body>
<div id="chart" style="height:500px"></div>
<script>
var data = {
dataset: [
{x: 0, y: 0, other_y: 0, val_2: 0, val_3: 0},
...
]
};
var options = {
axes: {x: { key: "x" }},
series: [ ... ], ...
};
var lineChart = new n3Charts.LineChart("#chart", options, data);
lineChart.update();
</script>
</body>
</html>vanilla-line-chart is made with love and care by Christoph Körner & Sébastien Fragnaud.