Easy Elegant Vanilla JavaScript Chart Library – dopyo.js

Preview:

Description:

dopyo.js is a lightweight JavaScript library for dynamically rendering beautiful, scalable, SVG based charts from a data set you provide.

Currently supports line and area charts.

How to use it:

Install & import the dopyo library into your project.

# NPM
$ npm install dopyo.js --save

import 'dopyo.js/dist/dopyo.css';
import { dopyo } from 'dopyo.js';

Or load the files from the dist folder.

<link rel="stylesheet" href="dist/dopyo.css">
<script src="dist/dopyo.js"></script>

Create a placeholder for the chart.

<div id="myChart"></div>

Prepare your data to be plotted.

const myData = {
      xAxis: ['2018-01', '2018-02', '2018-03', '2018-04', '2018-05',],
      series: [
        {
          name: 'CSS',
          data: [30, 50, 70, 120, 100]
        },
        {
          name: 'Script',
          data: [20, 30, 90, 60, 120]
        },
        {
          name: 'Com',
          data: [0, 40, 60, 30, 100]
        },
      ]
}

Plot the data as lines or areas.

const myChart = dopyo.createChart({
  type: 'line', // or 'area'
  size: {
    width: 600,
    height: 400,
  },
  containerEl: '#myChart',
  data: myData,
  options: {
    xAxis: {
      show: false,
    },
    yAxis: {
      show: true,
      title: 'y-axis Title'
    },
    tooltip: {
      show: true
    }
  }
});