Simple Clean SVG Chart Library – dopyo.js

Preview:

Description:

dopyo.js is a standalone, simple-to-use JavaScript library for drawing animated, SVG based charts to visualize your dataset.

Currently supports Bar Chart, Column Chart, Line Chart, Stacked Bar Chart, and Pie Chart.

How to use it:

Download and import the main JavaScript file ‘dopyo.js’ into the html page.

<script src="lib/dopyo.js"></script>

Create a new chart instance with the following parameters:

• Selector: a container to place the chart.
• Chart Type: Bar, Column, Line, Stacked-Bar, or Pie.

let myChart = new Dopyo("container", "Bar");

Add values, legends, labels, and other attributes to the chart.

myChart.setLabels(["2013", "2014", "2015", "2016", "2017", "2018"]);
myChart.addLegend({"name": "Alpha", "values": [10, 20, 30, 40, 50, 60]});
myChart.addLegend({"name": "Bravo", "values": [65, 15, 25, 40, 60, 75]});
myChart.addLegend({"name": "Charlie", "values": [20, 45, 65, 45, 20, 70]});
myChart.setPadding(75, 30, 10, 0); 
myChart.setTitleText("Chart Title");
myChart.setGridYShow(true);

Draw the chart on the screen. Done.

d.draw();