EazyChart is a reactive chart library πŸ“ˆ, it allows you to easily add SVG charts in your React and Vue web applications.

Overview

EazyChart

EazyChart is a reactive chart library, it offers the ability to easily add charts in your React and Vue web applications.

The purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:

  • Easily integrate charts.
  • Highly customizable charts
  • Simple usage of React and Vue components with the same syntax.
  • SVG charts, depending only on some D3.js submodules.
  • Responsive charts that work across all modern browsers.
  • Includes animation support.

Basic Usage

<PieChart
  colors={['red', 'blue', 'green']}
  domainKey={'value'}
  rawData={[
    { label: 'Alpha', value: 10 },
    { label: 'Beta', value: 20 },
    { label: 'Gamma', value: 30 },
  ]} />

Installation

EazyChart has not been yet released, we are currently working on some details before releasing the 1st version.

Documentation

Under construction ... coming soon.

Contributing

This project is a mono-repo using Lerna.

Installation

Clone the project and then in the root folder, perform the following commands :

yarn
yarn setup

Useful Commands

yarn clean // removes node_modules folders
yarn setup // installs node_modules in each package
yarn storybook // runs storybook for both react and vue

FAQ

  • Why is there a "nohoist" to all npm packages ?

We have had some trouble with Vue + TSX, as it occured multiple times where we get react TS errors in Vue JSX code. After passing a long time troubleshooting, we didn't find the root cause. We hope this gets fixed in Vue3 or with Vite bundler. Until then ... we do not hoist ! More on https://lerna.js.org/docs/concepts/hoisting

License

EazyChart is available under the MIT license.

Copyright (c) 2022 Hexastack.

Comments
  • fix: remove lerna hoist (disable yarn workspaces)

    fix: remove lerna hoist (disable yarn workspaces)

    We have had some trouble with Vue + TSX, as it occured multiple times where we get react TS errors in Vue JSX code. After passing a long time troubleshooting, we didn't find the root cause. We hope this gets fixed in Vue3 or with Vite bundler. Until then ... we do not hoist ! More on https://lerna.js.org/docs/concepts/hoisting

    opened by marrouchi 0
  • config: add issue report template

    config: add issue report template

    • added three type of issue reports:
    • Issue report(for users, if they get issues using the lib
    • Bug Report (in case there is an obvious bug)
    • feature request.
    opened by IlyesBenAmara 0
  • yarn type-check in eazychart-vue is breaking because of JSX

    yarn type-check in eazychart-vue is breaking because of JSX

    The errors "XXXXX cannot be used as a JSX component" keeps on showing from time to time, whether in VsCode or using the yarn type-check command. I thought we already resolved this using "shims-tsx.d.ts" file, but I guess not.

    invalid 
    opened by marrouchi 0
  • Set proper peerDependencies in package.json files

    Set proper peerDependencies in package.json files

    When a dependency is listed in a package as a peerDependency, it is not automatically installed. Instead, the code that includes the package must include it as its dependency. (Note that this is set I think for ez-react but not for vue)

    opened by marrouchi 0
  • Rename the Line shape component

    Rename the Line shape component

    There's already a tag in SVG called "line" which conflicts with the component we've created. So we'll need to rename it both in vue & react.

    opened by marrouchi 0
  • Address warning when running `yarn test` in @ez/vue

    Address warning when running `yarn test` in @ez/vue

    There's a warning that shows up when running yarn test:vue. The onResize not being passed, while it should be optional.

    Console
    @ez/vue:     console.error ../../node_modules/vue/dist/vue.runtime.common.dev.js:571
    @ez/vue:       [Vue warn]: Invalid handler for event "resize": got undefined
    @ez/vue:       
    @ez/vue:       found in
    @ez/vue:       
    @ez/vue:       ---> <Chart>
    @ez/vue:              <BarChart>
    @ez/vue:                <Root>
    
    good first issue 
    opened by marrouchi 0
Owner
Hexastack
Hexastack is a social-techlab. We're specialized in web development. We build awesome things for a better web experience.
Hexastack
React-Gantt-Chart allows you to create custom gantt charts with ease

react-gantt-chart React-Gantt-Chart allows you to create custom gantt charts with ease. No more nonsense! Installation npm install --save react-gantt-

Nikita Smith 11 Sep 23, 2022
React minimal pie chart🍰 Lightweight but versatile SVG pie/donut charts for React. < 2kB gzipped.

React minimal pie chart Lightweight React SVG pie charts, with versatile options and CSS animation included. < 2kB gzipped. ?? Demo ?? . Why? Because

Andrea Carraro 329 Sep 20, 2022
Chart rendering from go-coinmarketcap's statistics log with antd and chart.js

Coinmarketcap Graph Graph rendering from go-coinmarketcap's statistics log. In addition, support searchable info table and CSV download. Sample Previe

null 8 Sep 8, 2022
Ideapedyudi-charts - Test package chart with react.js

Ideapedyudi-charts - Test package chart with react.js

Muhammad Wahyudi 1 Jan 22, 2022
A thin, typed, React wrapper over Google Charts Visualization and Charts API.

React Google Charts A thin, typed, React wrapper for Google Charts. Docs and examples. React Google Charts Docs and examples. Installation Quick Start

Rakan Nimer 1.3k Sep 30, 2022
A thin, typed, React wrapper over Google Charts Visualization and Charts API.

A thin, typed, React wrapper for Google Charts. Docs and examples. React Google Charts Docs and examples. Installation Quick Start

Rakan Nimer 1.3k Sep 30, 2022
A collection of easy to use charts created in D3 for your React applications.

react-charts-d3 A collection of easy to use charts created in D3 for your React applications. Area Chart Bar Chart Bubble Chart Line Chart Pie Chart S

Nick Turner 4 Jan 19, 2021
An extendable SVG donut chart React component

react-donut-chart An extendable SVG-based donut chart React component. Installation npm install react-donut-chart --save Usage import DonutChart from

JJ Naughton 25 Sep 24, 2022
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 18.9k Sep 29, 2022
A flexible, stateless, declarative flow chart library for react.

A flexible, stateless, declarative flow chart library for react.

David Revay 1.3k Sep 18, 2022
A React chart library, based on G2Plot, G6, X6, L7.

A React chart library, based on G2Plot, G6, X6, L7.

Ant Design Team 1.3k Sep 27, 2022
A sweet & simple chart library for React Native that will make us feel like We're All Gonna Make It.

react-native-wagmi-charts ?? A sweet & simple chart library for React Native that will make us feel like We're All Gonna Make It Features ?? Line char

CoinJar 340 Sep 23, 2022
billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js.

Re-usable, easy interface JavaScript chart library based on D3.js

NAVER 5.3k Oct 1, 2022
Reactochart is a library of React components for creating data visualization charts and graphs.

Reactochart is a library of React components for creating data visualization charts and graphs. Components include line chart, bar chart, area chart, heat maps, scatterplot, histogram, pie chart, sankey diagram, and tree map.

Spotify 510 Sep 24, 2022
Highly customizable library for building interactive node-based UIs, editors, flow charts and diagrams

React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with components like a mini-map and graph controls.

webkid 12k Sep 22, 2022
A declarative, efficient, and simple JavaScript library for building responsive charts

A declarative, efficient, and simple JavaScript library for building responsive charts

ZingChart 252 Aug 18, 2022
A React library for creating animated charts visualizations based on dynamic data.

react-dynamic-charts (demo) A React library for creating animated charts visualizations based on dynamic data. Install npm install --save react-dynami

Daniel Sternlicht 212 Sep 8, 2022
common react charting components using chart.js

react-chartjs rich interactive react charting components using chart.js including Line chart Bar chart Radar chart Polar area chart Pie chart Doughnut

React Community 3k Sep 15, 2022
React wrapper for Chart.js

Looking for maintainers!! react-chartjs-2 React wrapper for Chart.js 2 Open for PRs and contributions! UPDATE to 2.x As of 2.x we have made chart.js a

null 5.4k Sep 24, 2022