vector-chartsdeprecated

A light-weigth reusable charting library based on D3.js V5

Usage no npm install needed!

<script type="module">
  import vectorCharts from 'https://cdn.skypack.dev/vector-charts';
</script>

README

vector-charts

A light-weigth reusable charting library based on D3.js v5.

Timeseries Charts

  • Line Chart - Demo
  • Area Chart - Demo
  • Line + Area Chart - Demo
  • Stacked Area Chart - Demo
  • Line + Stacked Area Chart - Demo

Pieseries Charts

Barseries Charts

  • Bar Chart - Demo
  • Multi series Bar Chart - Demo

Quick Start

Vector-charts is written in ES6, uses yarn package manager and built with webpack.
The released bundle supports AMD, CommonJS, and vanilla environments.
Usage example:

  • Simply add the vector-charts assets to your project and include them in your HTML.
# Include CSS for Vector-charts
<link rel="stylesheet" type="text/css" href="vector-charts.css">

# Include Vector-charts - whole bundle, imports all Charts by default
<script src="vector-charts.min.js"></script>  
          
 # Include Vector-charts on demand - lazy bundle, imports required Charts based on demand and usage         
<script src="vector-charts-lazy.min.js"></script>
  • You can create a custom bundle using webpack or your preferred bundler and import the vector-charts
    in your application as shown below:
import * as vc from "vector-charts"; // Import everything into a namespace (here, vc):

import {plotChart} from "vector-charts"; // To import specific module

Dependencies

Imports only few modules of D3.js in vector-charts and not the entrie D3.js modules.
Please check package.json for the various d3 packages dependencies imported.
Requires D3.js ^5.0.0 - Greater than V5 version.

How to build

  • Clone the repo: git clone https://github.com/skkart/vector-charts.git or npm install vector-charts
  • Run yarn install -- Download all project dependencies.
  • Run yarn build -- Production mode, the compiled code will be in the dist folder.
  • Run yarn start -- Start server on example folder to check the chart samples (open Usage.html for chart links)

Supported Browsers

Recommended that you upgrade to the latest version of one of the below-listed browsers

  • Google Chrome
  • Opera
  • Safari
  • Firefox
  • Microsoft Edge

License

MIT

Copyright (c) 2019 Karthik S