{"id":13515904,"url":"https://github.com/spotify/reactochart","last_synced_at":"2025-05-16T06:04:14.207Z","repository":{"id":38455172,"uuid":"49230386","full_name":"spotify/reactochart","owner":"spotify","description":":chart_with_upwards_trend: React chart component library :chart_with_downwards_trend:","archived":false,"fork":false,"pushed_at":"2023-12-05T23:45:11.000Z","size":107686,"stargazers_count":549,"open_issues_count":38,"forks_count":55,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-05-11T10:57:02.170Z","etag":null,"topics":["charting-library","charts","data-visualization","react","react-components","spotify"],"latest_commit_sha":null,"homepage":"https://spotify.github.io/reactochart/docs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spotify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-01-07T20:58:18.000Z","updated_at":"2025-04-23T15:14:44.000Z","dependencies_parsed_at":"2024-01-13T19:25:43.262Z","dependency_job_id":"e2cc02fc-9ae8-4aca-b4f1-13995001c4d1","html_url":"https://github.com/spotify/reactochart","commit_stats":{"total_commits":600,"total_committers":36,"mean_commits":"16.666666666666668","dds":0.5016666666666667,"last_synced_commit":"cd783035fabdd36953ff8e3e60702efedc86545a"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spotify%2Freactochart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spotify%2Freactochart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spotify%2Freactochart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spotify%2Freactochart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spotify","download_url":"https://codeload.github.com/spotify/reactochart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478163,"owners_count":22077675,"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":["charting-library","charts","data-visualization","react","react-components","spotify"],"created_at":"2024-08-01T05:01:17.214Z","updated_at":"2025-05-16T06:04:14.153Z","avatar_url":"https://github.com/spotify.png","language":"JavaScript","readme":"\u003cp align=\"right\"\u003e\n  \u003ca href=\"https://npmjs.org/package/reactochart\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/reactochart.svg?style=flat-square\" alt=\"version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/spotify/reactochart\"\u003e\n    \u003cimg src=\"https://travis-ci.org/spotify/reactochart.svg?branch=master\" alt=\"build\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ca href=\"https://spotify.github.io/reactochart/docs/\"\u003e\u003ch1 align=\"center\"\u003eReactochart\u003ca href=\"\"\u003e\u003c/h1\u003e\u003c/a\u003e\n\n# Overview\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/spotify/reactochart.svg)](https://greenkeeper.io/)\n\nReactochart 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**.\n\n# Getting started\n\n1.  Install reactochart using npm.\n\n```\nnpm i reactochart --save\n```\n\n2.  Then you can import an individual Reactochart component:\n\n```jsx\nimport LineChart from 'reactochart/LineChart';\n```\n\n3.  If you prefer, you can import all of Reactochart at once, though this may hinder some optimizations, such as webpack tree-shaking:\n\n```jsx\nimport { XYPlot, XAxis, YAxis, LineChart } from 'reactochart';\n```\n\nor\n\n```jsx\nimport * as Reactochart from 'reactochart';\n```\n\n4.  Import reactochart's base styles\n\n```jsx\nimport 'reactochart/styles.css';\n```\n\n5.  Build your first chart and see it rendered! For example, the following code snippet:\n\n```jsx\nimport XYPlot from 'reactochart/XYPlot';\nimport XAxis from 'reactochart/XAxis';\nimport YAxis from 'reactochart/YAxis';\nimport LineChart from 'reactochart/LineChart';\nimport 'reactochart/styles.css';\n\nconst MyFirstLineChart = props =\u003e (\n  \u003cXYPlot\u003e\n    \u003cXAxis title=\"Phase\" /\u003e\n    \u003cYAxis title=\"Intensity\" /\u003e\n    \u003cLineChart\n      data={Array(100)\n        .fill()\n        .map((e, i) =\u003e i + 1)}\n      x={d =\u003e d}\n      y={d =\u003e Math.sin(d * 0.1)}\n    /\u003e\n  \u003c/XYPlot\u003e\n);\n```\n\nresults in this:\n\n\u003cimg src=\"./docs/assets/MyFirstLineChart.png\" style='margin-left:40px'/\u003e\n\n# Live Examples\n\nThe examples contain more details about each component and the prop-types it accepts. To run the examples locally and play with the different types of charts in a live code editor:\n\n1.  Clone this repo and `cd` to the newly-created directory\n2.  Run `npm run serve` in your terminal (note: if you're running Python in v3 or higher you'll need to run `python -m http.server`)\n3.  Go to [http://localhost:8000](http://localhost:8000)\n\n# Reactochart Components\n\n## Chart Foundations\n\n### XY Plot\n\n- [XYPlot](http://spotify.github.io/reactochart/docs/build/#/xy-plot)\n\n### XY Axis Components\n\n- [XAxis](http://spotify.github.io/reactochart/docs/build/#/x-axis), [YAxis](http://spotify.github.io/reactochart/docs/build/#/y-axis)\n- [XAxisTitle](http://spotify.github.io/reactochart/docs/build/#/x-axis-title), [YAxisTitle](http://spotify.github.io/reactochart/docs/build/#/y-axis-title)\n- [XAxisLabels](http://spotify.github.io/reactochart/docs/build/#/x-axis-labels), [YAxisLabels](http://spotify.github.io/reactochart/docs/build/#/y-axis-labels)\n- [XTicks](http://spotify.github.io/reactochart/docs/build/#/x-ticks), [YTicks](http://spotify.github.io/reactochart/docs/build/#/y-ticks)\n- [XGrid](http://spotify.github.io/reactochart/docs/build/#/x-grid), [YGrid](http://spotify.github.io/reactochart/docs/build/#/y-grid)\n\n## Chart Types\n\n### Non-XY charts\n\n- [PieChart](http://spotify.github.io/reactochart/docs/build/#/pie-chart)\n- [TreeMap](http://spotify.github.io/reactochart/docs/build/#/tree-map)\n- [SankeyDiagram](http://spotify.github.io/reactochart/docs/build/#/sankey)\n\n### XY charts\n\n- [AreaBarChart](http://spotify.github.io/reactochart/docs/build/#/area-bar-chart)\n- [AreaChart](http://spotify.github.io/reactochart/docs/build/#/area-chart)\n- [AreaHeatmap](http://spotify.github.io/reactochart/docs/build/#/area-heatmap)\n- [BarChart](http://spotify.github.io/reactochart/docs/build/#/bar-chart)\n- [ColorHeatmap](http://spotify.github.io/reactochart/docs/build/#/color-heatmap)\n- [FunnelChart](http://spotify.github.io/reactochart/docs/build/#/funnel-chart)\n- [Histogram](http://spotify.github.io/reactochart/docs/build/#/histogram)\n- [LineChart](http://spotify.github.io/reactochart/docs/build/#/line-chart)\n- [MarkerLineChart](http://spotify.github.io/reactochart/docs/build/#/marker-line-chart)\n- [RangeBarChart](http://spotify.github.io/reactochart/docs/build/#/range-bar-chart)\n- [ScatterPlot](http://spotify.github.io/reactochart/docs/build/#/scatter-plot)\n\n### XY datum components (used by charts/axes)\n\n- [Bar](http://spotify.github.io/reactochart/docs/build/#/bar)\n- [RangeRect](http://spotify.github.io/reactochart/docs/build/#/range-rect)\n- [XLine](http://spotify.github.io/reactochart/docs/build/#/x-line), [YLine](http://spotify.github.io/reactochart/docs/build/#/y-line)\n\n### Other\n\n- [ZoomContainer](http://spotify.github.io/reactochart/docs/build/#/zoom-container)\n\n# Development\n\nIf you'd like to contribute to the development this project, first fork \u0026 clone this repo, and then follow these steps:\n\n### Global dependencies\n\n- This project uses NPM to manage dependencies and run scripts. Run `npm -v` to check if you already have it installed.\n  If you don't have it, NPM is packaged with Node.js - download and run the\n  [install package located on nodejs.org](https://nodejs.org/) to install.\n- Babel is used to transpile ES6+ code to ES5 syntax. Install by running `npm install --global babel`\n- Webpack is used to bundle the JS \u0026 styles for the examples. Install by running `npm install --global webpack`\n\n### Project dependencies\n\n- Run `npm install` in the project root directory. This will install all of the project dependencies into the\n  `node_modules` directory.\n\n### Development process\n\n- Run `npm run dev` to run the development server (webpack-dev-server), which will serve a live development version of the examples at [localhost:9876](http://localhost:9876).\n- Make changes to the library code in the `src` directory, and/or changes to the examples in the `examples/src` directory.\n- If you'd like to make changes or add further component documentation, follow the example on [`react-docgen`](https://github.com/reactjs/react-docgen#example).\n- Once you're happy with your library and/or documentation changes, run `npm run docs`. This allows the documentation build to run with your updated `src` code. `git add` and `git commit` the updated build.\n- `git push` to your forked version of the repo.\n- Open a Github pull request with your changes against `master`. 🎉\n\n### NPM Link\n\nIf you have an app that depends on reactochart and you want to develop locally, follow the following steps:\n\n1. In the folder for this repo, run `npm build` and then `npm link`\n2. In your app folder, run `npm link reactochart`. If you're using webpack, then you also may need the following config:\n\n```json\n{\n  \"resolve\": {\n    \"symlinks\": true,\n    \"alias\": {\n      \"react\": path.resolve(\"./node_modules/react\"),\n      \"react-dom\": path.resolve(\"./node_modules/react-dom\")\n    }\n  }\n}\n```\n\n### Notes\n\n- **Do not make any changes in the `lib` or `examples/build` directories**, as these directories are destroyed and\n  regenerated on each build.\n- The development server uses [react-hot-loader](https://github.com/gaearon/react-hot-loader) to automatically\n  \"hot reload\" changes to React components, so refreshing your web browser is not necessary.\n\n## Code of Conduct\n\nThis project adheres to the [Open Code of Conduct][code-of-conduct]. By participating, you are expected to honor this code.\n\n[code-of-conduct]: https://github.com/spotify/code-of-conduct/blob/master/code-of-conduct.md\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspotify%2Freactochart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspotify%2Freactochart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspotify%2Freactochart/lists"}