Eazychart-vue NPM

EazyChart

NOTE: This library supports Vue v2.x as it hasn't been tested for v3.x. We expect to work on v3 soon.

Motivation

The purpose of this library is to provide :

Highly customizable charts.
Less library dependencies.
Easy integration charts into React / Vue applications.
Simple syntax.
SVG Render with some HTML/CSS.
Responsive and functional across all devices and modern browsers.
Animation support.

Installation

EazyChart has not been yet released. It's still in the alpha stage as we are currently working on some details before releasing a major version. You still can install and try out the library but we don't recommend using it in a production environment.

For each framework, you will need to install the appropriate packages.

Use one of the following commands :

// Using npm
npm install --save eazychart-vue eazychart-css

// Using yarn
yarn add eazychart-vue eazychart-css

Basic Usage

Import the chart from the library :

import { PieChart } from 'eazychart-vue';
import 'eazychart-css'; // You just need to import this once.

Use any chart component with vue component syntax :

<template>
  <div id="app">
    <pie-chart :colors="colors" valueDomainKey="value" labelDomainKey="label" :data="data"/>
  </div>
</template>
<script>
import { PieChart } from 'eazychart-vue';
import 'eazychart-css';

export default {
  name: 'App',
  components: {
    PieChart
  },
  data() {
    return {
      colors: ['red', 'blue', 'green'],
      data: [
        { label: 'Alpha', value: 10 },
        { label: 'Beta', value: 20 },
        { label: 'Gamma', value: 30 },
      ],
    };
  },
};
</script>