[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3324":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},3324,"charts","frappe\u002Fcharts","frappe","Simple, responsive, modern SVG Charts with zero dependencies","https:\u002F\u002Ffrappe.io\u002Fcharts\u002Fdocs",null,"JavaScript",15088,749,212,127,0,1,3,16,43.63,"MIT License",false,"master",true,[26,27,28,29,30,31,32],"chart","graph","hacktoberfest","javascript","svg","svg-chart","zero-dependency","2026-06-12 02:00:48","\u003Cdiv align=\"center\" markdown=\"1\">\n    \n\u003Cimg width=\"80\" alt=\"charts-logo\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F37b7ffaf-8354-48f2-8b9c-fa04fae0135b\" \u002F>\n    \n# Frappe Charts\n**GitHub-inspired modern, intuitive and responsive charts with zero dependencies**\n\n\u003Cp align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fbundlephobia.com\u002Fresult?p=frappe-charts\">\n        \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002Ffrappe-charts\">\n    \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cimg src=\".github\u002Fexample.gif\">\n\n\u003Cdiv>\n\n[Explore Demos](https:\u002F\u002Ffrappe.io\u002Fcharts) - [Edit at CodeSandbox](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Ffrappe-charts-demo-viqud) - [Documentation](https:\u002F\u002Ffrappe.io\u002Fcharts\u002Fdocs)  \n\n\u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n## Frappe Charts\nFrappe Charts is a simple charting library with a focus on a simple API. The design is inspired by various charts you see on GitHub.\n\n### Motivation\n\nERPNext needed a simple sales history graph for its user company master to help users track sales. While using c3.js for reports, the library didn’t align well with our product’s classic design. Existing JS libraries were either too complex or rigid in their structure and behavior. To address this, I decided to create a library for translating value pairs into relative shapes or positions, focusing on simplicity.\n\n### Key Features\n\n- **Variety of chart types**: Frappe Charts supports various chart types, including Axis Charts, Area and Trends, Bar, Line, Pie, Percentage, Mixed Axis, and Heatmap.\n- **Annotations and tooltips**: Charts can be annotated with x and y markers, regions, and tooltips for enhanced data context and clarity.\n- **Dynamic data handling**: Add, remove, or update individual data points in place, or refresh the entire dataset to reflect changes.\n- **Customizable configurations**: Flexible options like colors, animations, and custom titles allow for a highly personalized chart experience.\n\n## Usage\n\n```sh\nnpm install frappe-charts\n```\n\nImport in your project:\n```js\nimport { Chart } from 'frappe-charts'\n\u002F\u002F or esm import\nimport { Chart } from 'frappe-charts\u002Fdist\u002Ffrappe-charts.esm.js'\n\u002F\u002F import css\nimport 'frappe-charts\u002Fdist\u002Ffrappe-charts.min.css'\n```\n\nOr directly include script in your HTML\n\n```html\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Ffrappe-charts@1.6.1\u002Fdist\u002Ffrappe-charts.min.umd.js\">\u003C\u002Fscript>\n```\n\n\n```js\nconst data = {\n    labels: [\"12am-3am\", \"3am-6pm\", \"6am-9am\", \"9am-12am\",\n        \"12pm-3pm\", \"3pm-6pm\", \"6pm-9pm\", \"9am-12am\"\n    ],\n    datasets: [\n        {\n            name: \"Some Data\", chartType: \"bar\",\n            values: [25, 40, 30, 35, 8, 52, 17, -4]\n        },\n        {\n            name: \"Another Set\", chartType: \"line\",\n            values: [25, 50, -10, 15, 18, 32, 27, 14]\n        }\n    ]\n}\n\nconst chart = new frappe.Chart(\"#chart\", {  \u002F\u002F or a DOM element,\n                                            \u002F\u002F new Chart() in case of ES6 module with above usage\n    title: \"My Awesome Chart\",\n    data: data,\n    type: 'axis-mixed', \u002F\u002F or 'bar', 'line', 'scatter', 'pie', 'percentage'\n    height: 250,\n    colors: ['#7cd6fd', '#743ee2']\n})\n```\n\n## Contributing\n\n1. Clone this repo.\n2. `cd` into project directory\n3. `npm install`\n4. `npm i npm-run-all -D` (*optional --> might be required for some developers*)\n5. `npm run dev`\n\n## Links\n\n- [Read the blog](https:\u002F\u002Fmedium.com\u002F@pratu16x7\u002Fso-we-decided-to-create-our-own-charts-a95cb5032c97)\n\n\n\u003Cbr>\n\u003Cbr>\n\u003Cdiv align=\"center\">\n\t\u003Ca href=\"https:\u002F\u002Ffrappe.io\" target=\"_blank\">\n\t\t\u003Cpicture>\n\t\t\t\u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Ffrappe.io\u002Ffiles\u002FFrappe-white.png\">\n\t\t\t\u003Cimg src=\"https:\u002F\u002Ffrappe.io\u002Ffiles\u002FFrappe-black.png\" alt=\"Frappe Technologies\" height=\"28\"\u002F>\n\t\t\u003C\u002Fpicture>\n\t\u003C\u002Fa>\n\u003C\u002Fdiv>\n","Frappe Charts 是一个用于创建简单、响应式和现代化SVG图表的JavaScript库，没有任何外部依赖。它支持多种图表类型，包括轴图、面积图、条形图、折线图、饼图、百分比图、混合轴图以及热力图，并且提供了丰富的注释和提示功能，可以动态地添加、删除或更新数据点。此外，Frappe Charts 提供了高度可定制化的配置选项，如颜色、动画和自定义标题等，以满足不同用户的需求。该库非常适合需要在网页应用中快速集成直观且美观图表的场景，尤其是对于那些追求简洁API设计与GitHub风格视觉效果的应用程序而言。",2,"2026-06-11 02:53:35","top_language"]