{"id":15024749,"url":"https://github.com/hexastack/eazychart","last_synced_at":"2025-10-20T04:39:42.565Z","repository":{"id":59312241,"uuid":"536503711","full_name":"Hexastack/eazychart","owner":"Hexastack","description":"EazyChart is a reactive chart library 📈, it allows you to easily add SVG charts in your React and Vue web applications.","archived":false,"fork":false,"pushed_at":"2024-08-14T05:58:14.000Z","size":5251,"stargazers_count":24,"open_issues_count":31,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-06T12:09:31.159Z","etag":null,"topics":["chart","charts","d3","data","dataanalysis","dataviz","graphs","hacktoberfest","hacktoberfest2022","javascript","library","react","typescript","visualization","vue","web"],"latest_commit_sha":null,"homepage":"https://eazychart.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hexastack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-14T09:24:53.000Z","updated_at":"2024-12-15T10:28:16.000Z","dependencies_parsed_at":"2024-05-13T23:31:21.396Z","dependency_job_id":"0ef38222-f687-4cda-909e-c6dc1607afb0","html_url":"https://github.com/Hexastack/eazychart","commit_stats":{"total_commits":218,"total_committers":9,"mean_commits":24.22222222222222,"dds":0.5045871559633027,"last_synced_commit":"a85139aeaf84d3ea46c69bedaaec9f35c00ed45c"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hexastack%2Feazychart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hexastack%2Feazychart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hexastack%2Feazychart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hexastack%2Feazychart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hexastack","download_url":"https://codeload.github.com/Hexastack/eazychart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238747891,"owners_count":19523861,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","charts","d3","data","dataanalysis","dataviz","graphs","hacktoberfest","hacktoberfest2022","javascript","library","react","typescript","visualization","vue","web"],"created_at":"2024-09-24T20:00:51.961Z","updated_at":"2025-10-20T04:39:42.480Z","avatar_url":"https://github.com/Hexastack.png","language":"TypeScript","readme":"# EazyChart\n\u003cimg align=\"center\" width=\"500\" alt=\"EazyChart logo\" src=\"https://eazychart.com/img/logo.png\"/\u003e\n\u003cbr/\u003e\n\u003ca href=\"https://eazychart.com/\"\u003eEazyChart\u003c/a\u003e is a reactive chart library, it offers the ability to easily add charts in your React and Vue web applications. EazyChart does not depend on a JS chart library instead it depends only on some of the \u003ca href=\"https://d3js.org/\"\u003eD3.js\u003c/a\u003e library's submodules.\n\n\u003cbr /\u003e\n\u003ca href=\"https://docs.eazychart.com/\"\u003eWebsite\u003c/a\u003e\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n\u003ca href=\"https://docs.eazychart.com/?path=/story/get-started-introduction--page\"\u003eGet Started\u003c/a\u003e\n\u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n\u003ca href=\"https://docs.eazychart.com/?path=/story/get-started-installation--page\"\u003eInstallation\u003c/a\u003e\n\u003cbr /\u003e\n\u003chr /\u003e\n\n## Motivation\n\nThe purpose of this library is to provide :\n- Highly customizable charts.\n- Less library dependencies.\n- Easy integration charts into React / Vue applications.\n- Simple syntax.\n- SVG Render with some HTML/CSS.\n- Responsive and functional across all devices and modern browsers.\n- Animation support.\n\n## Installation\n\nEazyChart 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.\n\nFor each framework, you will need to install the appropriate packages.\n\n### React\n\nUse one of the following commands :\n\n```\n// Using npm\nnpm install --save eazychart-react eazychart-css\n\n// Using yarn\nyarn add eazychart-react eazychart-css\n```\n\n### Vue\n\nYou will need one of the following commands :\n\n```\n// Using npm\nnpm install --save eazychart-vue eazychart-css\n\n// Using yarn\nyarn add eazychart-vue eazychart-css\n```\n\u003e **_NOTE:_**  This library supports Vue v2.x as it hasn't been tested for v3.x. We expect to work on v3 soon.\n\n## Basic Usage\n\n### React\nImport the chart from library :\n```js\nimport { PieChart } from 'eazychart-react';\nimport 'eazychart-css'; // You just need to import this once.\n// ...\n```\nUse the chart component with the help of the JSX syntax :\n```jsx\n\u003cPieChart\n  colors={['red', 'blue', 'green']}\n  valueDomainKey={'value'}\n  labelDomainKey={'label'}\n  data={[\n    { label: 'Alpha', value: 10 },\n    { label: 'Beta', value: 20 },\n    { label: 'Gamma', value: 30 },\n  ]}\n/\u003e\n```\n\n### Vue\nImport the chart from the library :\n```js\nimport { PieChart } from 'eazychart-react'; // Don't forget to add \"PieChart\" to the \"components\" !\nimport 'eazychart-css'; // You just need to import this once in your \"main.js\" file.\n```\nUse the chart component :\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cpie-chart :colors=\"colors\" valueDomainKey=\"value\" labelDomainKey=\"label\" :data=\"data\"/\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport { PieChart } from 'eazychart-vue';\nimport 'eazychart-css';\n\nexport default {\n  name: 'App',\n  components: {\n    PieChart\n  },\n  data() {\n    return {\n      colors: ['red', 'blue', 'green'],\n      data: [\n        { label: 'Alpha', value: 10 },\n        { label: 'Beta', value: 20 },\n        { label: 'Gamma', value: 30 },\n      ],\n    };\n  },\n};\n\u003c/script\u003e\n```\n\n## Documentation\nTo learn more about EazyChart please visit our documentation website : [https://docs.eazychart.com](https://docs.eazychart.com)\n\n## Contributing\nYou could contribute the way you want, even by simply sharing the repo URL. You could test out the features, add some content to the documentation, raise issues, or push some PRs. Please read through our [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) and let us hear from you. \n\nHere are some of technical stuff that you need to know before adding any code :\n- This project is a mono-repo using [Lerna](https://lerna.js.org/).\n- All packages, including React and Vue libraries, are written in TypeScript.\n- Vue uses JSX + the class component syntax.\n- We use Jest snapshots in `ez-dev` so that we ensure React and Vue output the same result across all components.\n- For each component we implement unit tests using Jest / [Testing Library](https://testing-library.com/).\n- Documentation is provided using [Storybook](https://storybook.js.org/) with the help of the [Composition](https://storybook.js.org/docs/react/sharing/storybook-composition).\n\n### Installation\n\nClone the project and then in the root folder, perform the following commands :\n```\nnpm install -g lerna yarn\nyarn setup\n```\n\n### Useful Commands\n```\nyarn clean // removes node_modules folders\nyarn setup // installs node_modules in each package\nyarn storybook // runs storybook for both react and vue\n```\n\n### FAQ\n\n- Why is there a \"nohoist\" to all npm packages ? \n\u003e 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\n\n## License\n\nEazyChart is available under the MIT license.\n\nCopyright (c) 2022 Hexastack.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhexastack%2Feazychart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhexastack%2Feazychart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhexastack%2Feazychart/lists"}