EazyChart is a chart library, `eazychart-vue` offers the ability to easily add charts in your Vue web applications. EazyChart does not depend on a JS chart library instead it depends only on some of the D3.js library's submodules.
Website • Get Started • Installation
NOTE: This library supports Vue v2.x as it hasn't been tested for v3.x. We expect to work on v3 soon.
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.
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
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>
To learn more about EazyChart please visit our documentation website : https://docs.eazychart.com
Please refer to the main README file to learn how you could contribute to the project.
EazyChart is available under the MIT license.
Copyright (c) 2022 Hexastack.