anychart-react
Advanced tools
Readme
Intuitive and easy to use React plugin that allows you to create and work with AnyChart JavaScript Charts.
You can install AnyChart-React using npm, bower or yarn:
npm install anychart-reactbower install anychart-reactyarn add anychart-reactBinaries are in the dist folder.
Here is a basic sample that shows how to add a chart:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Anychart React plugin demo</title>
</head>
<body>
<!-- Mount node for application -->
<div id="root"></div>
<script src="app.min.js"></script>
</body>
</html>
Where app.min.js is compiled and bundled script of your application.
app.js:
import React from 'react'
import ReactDOM from 'react-dom'
import AnyChart from 'anychart-react.min.js'
ReactDOM.render(
<AnyChart
type="pie"
data={[1, 2, 3, 4]}
title="Simple pie chart"
/>, document.getElementById('root'));
To build plugin and samples you need to install gulp if you don't have it installed already.
Please install remaining dependencies using following command
npm install
To compile plugin from source run following command
gulp
To compile all examples run following command
gulp examples
To compile certain example run following command
gulp <example_name>
Feel free to modify samples, build them and see the results.
React 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 or webpack if you want to include it in your app.
See these examples to learn how things work:
The source code for all examples is in the examples/src folder.
| Property | Code sample | Description |
|---|---|---|
| instance | <AnyChart instance={myChart} | Allows to use a preconfigured instance |
| id | <AnyChart id="chart-container" /> | Container id. |
| type* | <AnyChart type="line" /> | Chart type. |
| data | <AnyChart type="column" data={[3, 1, 2]} /> | Chart data. |
| width/height | <AnyChart width={800} height={600} /> | Width/height of a chart (stage). |
| * - property is required if you do not use an instance. |
If you do not use an instance property of a component, properties go exactly as they go in AnyChart JavaScript API.
For example:
<AnyChart type="column" data={[3, 1, 2]} title="My Chart Title" legend="true"/>
is equivalent to:
var chart = anychart.column([3,1,2]);
chart.title("My Chart Title");
chart.legend(true);
To 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.
<AnyChart yAxis={[1, {enabled: true}]} />
Such settings are shown in Chart_with_JSON Settings example.
© AnyChart.com - JavaScript charts. React Plugin is released under the Apache 2.0 License.
FAQs
React component for AnyChart JavaScript charting library
We found that anychart-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Researchers recently demonstrated that the npm Registry is vulnerable to cache poisoning combined with DoS, posing significant risks for package availability.
Security News
The June TC39 meeting wrapped up this week with eight proposals moving on to the next stage. Here's a quick roundup of the features that the committee approved to advance.
Security News
Cyber extortion in the US and Canada hit record levels in 2023, with ransomware attacks surging and median ransom demands skyrocketing, though fewer companies are choosing to pay ransoms.