{"id":13517761,"url":"https://github.com/AnyChart/AnyChart-React","last_synced_at":"2025-03-31T09:30:46.678Z","repository":{"id":16647997,"uuid":"78492568","full_name":"AnyChart/AnyChart-React","owner":"AnyChart","description":"Intuitive and easy to use React plugin that allows you to create and work with AnyChart JavaScript Charts","archived":false,"fork":false,"pushed_at":"2023-01-05T00:03:33.000Z","size":3969,"stargazers_count":39,"open_issues_count":20,"forks_count":30,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-03-21T15:01:22.994Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.anychart.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AnyChart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-10T03:08:27.000Z","updated_at":"2024-05-10T14:56:42.000Z","dependencies_parsed_at":"2022-09-11T04:41:23.110Z","dependency_job_id":null,"html_url":"https://github.com/AnyChart/AnyChart-React","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2FAnyChart-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2FAnyChart-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2FAnyChart-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2FAnyChart-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnyChart","download_url":"https://codeload.github.com/AnyChart/AnyChart-React/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246446765,"owners_count":20778870,"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":[],"created_at":"2024-08-01T05:01:37.120Z","updated_at":"2025-03-31T09:30:45.057Z","avatar_url":"https://github.com/AnyChart.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[\u003cimg src=\"https://cdn.anychart.com/images/logo-transparent-segoe.png?2\" width=\"234px\" alt=\"AnyChart - Robust JavaScript/HTML5 Chart library for any project\"\u003e](https://www.anychart.com)\n\nReact Plugin for AnyChart\n=========\n\nIntuitive and easy to use [React](https://facebook.github.io/react/) plugin that allows you to create and work with [AnyChart JavaScript Charts](https://www.anychart.com).\n\n## Table of Contents\n\n* [Download and Install](#download-and-install)\n* [Quick Start](#quick-start)\n* [Build](#build)\n* [Examples](#examples)\n* [Usage](#usage)\n* [Contacts](#contacts)\n* [Links](#links)\n* [License](#license)\n\n## Download and install\n\n#### Package managers\n\nYou can install AnyChart-React using **npm**, **bower** or **yarn**:\n\n* `npm install anychart-react`\n* `bower install anychart-react`\n* `yarn add anychart-react`\n\n#### Direct download\n\nBinaries are in the [dist](https://github.com/AnyChart/AnyChart-React/tree/master/dist) folder.\n\n## Quick Start\nHere is a basic sample that shows how to add a chart:\n\nindex.html:\n\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eAnychart React plugin demo\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n\u003c!-- Mount node for application --\u003e\n\u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003cscript src=\"app.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\nWhere app.min.js is compiled and bundled script of your application.\n\napp.js:\n\n```\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport AnyChart from 'anychart-react.min.js'\n\nReactDOM.render(\n  \u003cAnyChart\n    type=\"pie\"\n    data={[1, 2, 3, 4]}\n    title=\"Simple pie chart\"\n  /\u003e, document.getElementById('root'));\n```\n\n## Build\nTo build plugin and samples you need to install [gulp](http://gulpjs.com/) if you don't have it installed already.\n\nPlease install remaining dependencies using following command\n```\nnpm install\n```\n\n#### Building plugin\nTo compile plugin from source run following command\n```\ngulp\n```\n\n#### Building examples\nTo compile all examples run following command\n```\ngulp examples\n```\n\nTo compile certain example run following command\n```\ngulp \u003cexample_name\u003e\n```\n\nFeel free to modify samples, build them and see the results.\n\n#### Note\nReact Plugin for AnyChart is developed using ES6 syntax. There are `import` and `require` statements in it, so you need a JavaScript bundler (such as [browserify](http://browserify.org/) or [webpack](https://webpack.github.io/) if you want to include it in your app.\n\n## Examples\nSee these examples to learn how things work:\n\n* **[Chart_with_JSON_Settings](https://github.com/anychart/anychart-react/blob/master/examples/chart_with_json)**: Chart with complex JSON settings.\n* **[Multiseries Chart](https://github.com/anychart/anychart-react/blob/master/examples/multiseries_column_chart)**: Multiseries Column Chart Sample.\n* **[Charts_with_Controls](https://github.com/anychart/anychart-react/blob/master/examples/charts_with_controls)**: Simple demo with 2 charts. Allows to change title and enable/disable legend.\n* **[Geographical_Map](https://github.com/anychart/anychart-react/blob/master/examples/choropleth_map)**: Choropleth map demo.\n* **[Data_Streaming](https://github.com/anychart/anychart-react/blob/master/examples/data_streaming)**: Simple data streaming demo.\n* **[Simple_Dashboard](https://github.com/anychart/anychart-react/blob/master/examples/simple_dashboard)**: Simple dashboard demo.\n* **[Stock Chart](https://github.com/anychart/anychart-react/blob/master/examples/stock)**: Stock chart demo.\n* **[Tabs](https://github.com/anychart/anychart-react/blob/master/examples/tabs)**: Demo shows how you can use AnyChart with [React Tabs](https://github.com/reactjs/react-tabs); also shows how to control a legend using component state.\n\nThe source code for all examples is in the [`examples/src`](https://github.com/anychart/anychart-react/blob/master/examples/src) folder.\n\n## Usage\nProperty | Code sample | Description\n--- | --- | ---\ninstance | `\u003cAnyChart instance={myChart}` | Allows to use a [preconfigured instance](https://github.com/anychart/anychart-react/blob/master/examples/src/simple_dashboard.js)\nid | `\u003cAnyChart id=\"chart-container\" /\u003e` | Container id.\ntype\\* | `\u003cAnyChart type=\"line\" /\u003e` | Chart type.\ndata | `\u003cAnyChart type=\"column\" data={[3, 1, 2]} /\u003e` | Chart data.\nwidth/height | `\u003cAnyChart width={800} height={600} /\u003e` | Width/height of a chart (stage).\n\\* - property is required if you do not use an instance.\n\nIf you do not use an *instance* property of a component, properties go exactly as they go in [AnyChart JavaScript API](https://api.anychart.com).\n\nFor example:\n\n```\n\u003cAnyChart type=\"column\" data={[3, 1, 2]} title=\"My Chart Title\" legend=\"true\"/\u003e\n```\nis equivalent to:\n\n```\nvar chart = anychart.column([3,1,2]);\nchart.title(\"My Chart Title\");\nchart.legend(true);\n```\n\n#### Multiple entities (axes, line markers, grids)\nTo configure entity by index, you should use an array as a value: the first item in an array - index of an entity, the second - configuration.\n\n```\n\u003cAnyChart yAxis={[1, {enabled: true}]} /\u003e\n```\n\nSuch settings are shown in [Chart_with_JSON Settings](https://github.com/anychart/anychart-react/blob/master/examples/src/chart_with_json.js) example.\n\n## Contacts\n\n* Web: [www.anychart.com](https://www.anychart.com)\n* Email: [contact@anychart.com](mailto:contact@anychart.com)\n* Twitter: [anychart](https://twitter.com/anychart)\n* Facebook: [AnyCharts](https://www.facebook.com/AnyCharts)\n* LinkedIn: [anychart](https://www.linkedin.com/company/anychart)\n\n## Links\n\n* [Report Issues](https://github.com/AnyChart/AnyChart-React/issues)\n* [AnyChart Website](https://www.anychart.com)\n* [Download AnyChart](https://www.anychart.com/download/)\n* [AnyChart Licensing](https://www.anychart.com/buy/)\n* [AnyChart Support](https://www.anychart.com/support/)\n* [AnyChart Playground](https://playground.anychart.com)\n* [AnyChart Documentation](https://docs.anychart.com)\n* [AnyChart API Reference](https://api.anychart.com)\n* [AnyChart Sample Solutions](https://www.anychart.com/solutions/)\n* [AnyChart Integrations](https://www.anychart.com/integrations/)\n\n## License\n\nAnyChart React plugin sample includes two parts:\n- code of the plugin sample that allows to use Javascript library (in this case, AnyChart) with React Library. You can use, edit, modify it, use it with other Javascript libraries without any restrictions. It is released under [Apache 2.0 License](https://github.com/AnyChart/AnyChart-React/blob/master/LICENSE).\n- AnyChart JavaScript library. It is released under Commercial license. You can test this plugin with the trial version of AnyChart. Our trial version is not limited by time and doesn't contain any feature limitations. Check details [here](https://www.anychart.com/buy/)\n\nIf you have any questions regarding licensing - please contact us. \u003csales@anychart.com\u003e\n\n[![Analytics](https://ga-beacon.appspot.com/UA-228820-4/Plugins/React?pixel\u0026useReferer)](https://github.com/igrigorik/ga-beacon)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAnyChart%2FAnyChart-React","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAnyChart%2FAnyChart-React","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAnyChart%2FAnyChart-React/lists"}