[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3620":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":15,"starSnapshotCount":15,"syncStatus":38,"lastSyncTime":39,"discoverSource":40},3620,"recharts","recharts\u002Frecharts","Redefined chart library built with React and D3","https:\u002F\u002Frecharts.github.io",null,"TypeScript",27221,1931,179,411,0,4,15,119,19,95.36,"MIT License",false,"main",true,[26,27,28,29,30,31,32,5,33,34],"chart","charting-library","components","d3","data-visualisation","javascript","react","typescript","ui","2026-06-12 04:00:18","# Recharts\n\n[![storybook](https:\u002F\u002Fraw.githubusercontent.com\u002Fstorybooks\u002Fbrand\u002Fmaster\u002Fbadge\u002Fbadge-storybook.svg)](https:\u002F\u002Frecharts.github.io\u002Fen-US\u002Fstorybook)\n[![Build Status](https:\u002F\u002Fgithub.com\u002Frecharts\u002Frecharts\u002Fworkflows\u002FNode.js%20CI\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Frecharts\u002Frecharts\u002Factions)\n[![codecov](https:\u002F\u002Fcodecov.io\u002Fgh\u002Frecharts\u002Frecharts\u002Fgraph\u002Fbadge.svg?token=Bn6L2hrl8T)](https:\u002F\u002Fcodecov.io\u002Fgh\u002Frecharts\u002Frecharts)\n[![npm version](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Frecharts.svg)](http:\u002F\u002Fbadge.fury.io\u002Fjs\u002Frecharts)\n[![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Frecharts.svg?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Frecharts)\n[![MIT License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue.svg?style=flat)](\u002FLICENSE)\n\n## Introduction\n\nRecharts is a **Redefined** chart library built with [React](https:\u002F\u002Ffacebook.github.io\u002Freact\u002F) and [D3](http:\u002F\u002Fd3js.org).\n\nThe main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:\n\n1. **Simply** deploy with React components.\n2. **Native** SVG support, lightweight with minimal dependencies.\n3. **Declarative** components.\n\nDocumentation at [recharts.github.io](https:\u002F\u002Frecharts.github.io) and our [storybook](https:\u002F\u002Frecharts.github.io\u002Fen-US\u002Fstorybook)\n\nAlso see [the wiki](https:\u002F\u002Fgithub.com\u002Frecharts\u002Frecharts\u002Fwiki).\n\nAll development is done on the `main` branch. The current latest release and storybook documentation reflects what is on the `release` branch.\n\n## Examples\n\n```jsx\n\u003CLineChart width={400} height={400} data={data}>\n  \u003CXAxis dataKey=\"name\" \u002F>\n  \u003CTooltip \u002F>\n  \u003CCartesianGrid stroke=\"#f5f5f5\" \u002F>\n  \u003CLine type=\"monotone\" dataKey=\"uv\" stroke=\"#ff7300\" \u002F>\n  \u003CLine type=\"monotone\" dataKey=\"pv\" stroke=\"#387908\" \u002F>\n\u003C\u002FLineChart>\n```\n\nAll the components of Recharts are clearly separated. The LineChart is composed of x axis, tooltip, grid, and line items, and each of them is an independent React Component. The clear separation and composition of components is one of the principle Recharts follows.\n\n## Installation\n\n### npm\n\nNPM is the easiest and fastest way to get started using Recharts. It is also the recommended installation method when building single-page applications (SPAs). It pairs nicely with a CommonJS module bundler such as Webpack.\n\n```sh\n# latest stable\n$ npm install recharts react-is\n```\n\n`react-is` needs to match the version of your installed `react` package.\n\n### umd\n\nThe UMD build is also available on unpkg.com:\n\n```html\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Freact\u002Fumd\u002Freact.production.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Freact-dom\u002Fumd\u002Freact-dom.production.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Freact-is\u002Fumd\u002Freact-is.production.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Frecharts\u002Fumd\u002FRecharts.min.js\">\u003C\u002Fscript>\n```\n\nThen you can find the library on `window.Recharts`.\n\n## Contributing\n\nRecharts is open source. If you want to contribute to the project, please read the [CONTRIBUTING.md](\u002FCONTRIBUTING.md)\nto understand how to contribute to the project and [DEVELOPING.md](\u002FDEVELOPING.md) to set up your development\nenvironment.\n\n## Thanks\n\n\u003Ca href=\"https:\u002F\u002Fwww.chromatic.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F321738\u002F84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png\" width=\"153\" height=\"30\" alt=\"Chromatic\" \u002F>\u003C\u002Fa>\n\nThanks to [Chromatic](https:\u002F\u002Fwww.chromatic.com\u002F) for providing the visual testing platform that helps us review UI changes and catch visual regressions.\n\n[![JetBrains logo.](https:\u002F\u002Fresources.jetbrains.com\u002Fstorage\u002Fproducts\u002Fcompany\u002Fbrand\u002Flogos\u002Fjetbrains.svg)](https:\u002F\u002Fjb.gg\u002FOpenSourceSupport)\n\nThanks to JetBrains for providing OSS development license for their IDEs.\n\nBrowser testing via\n\n[![TestMu AI](www\u002Fpublic\u002Fassets\u002Ftestmu-logo-black.svg)](https:\u002F\u002Fwww.testmuai.com\u002F?utm_medium=sponsor&utm_source=recharts)\n\n\n## License\n\n[MIT](http:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n\nCopyright (c) 2015-2026 Recharts Group.\n","Recharts 是一个基于 React 和 D3 构建的图表库。它通过简单的 React 组件部署，支持原生 SVG 渲染，具有轻量级和最小依赖的特点，并且采用了声明式的组件设计。该库非常适合需要在 React 应用中快速集成数据可视化功能的场景，如仪表盘、报表系统等。其模块化的设计使得开发者能够灵活地组合和自定义图表组件，从而满足各种复杂的数据展示需求。",2,"2026-06-11 02:55:02","top_language"]