React component for AnyChart JavaScript charting library
npm install anychart-react
React Plugin for AnyChart
=========
Intuitive and easy to use React plugin that allows you to create and work with AnyChart JavaScript Charts.
npm install anychart-react
bower install anychart-react
yarn add anychart-react
Anychart React plugin demo
`
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(
type="pie"
data={[1, 2, 3, 4]}
title="Simple pie chart"
/>, document.getElementById('root'));
`
Build
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
`
#### Building plugin
To compile plugin from source run following command
`
gulp
`
#### Building examples
To compile all examples run following command
`
gulp examples
`
To compile certain example run following command
`
gulp
`
Feel free to modify samples, build them and see the results.
#### Note
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.
Examples
See these examples to learn how things work:
* Chart_with_JSON_Settings: Chart with complex JSON settings.
* Multiseries Chart: Multiseries Column Chart Sample.
* Charts_with_Controls: Simple demo with 2 charts. Allows to change title and enable/disable legend.
* Geographical_Map: Choropleth map demo.
* Data_Streaming: Simple data streaming demo.
* Simple_Dashboard: Simple dashboard demo.
* Stock Chart: Stock chart demo.
* Tabs: Demo shows how you can use AnyChart with React Tabs; also shows how to control a legend using component state.
The source code for all examples is in the examples/src folder.
Usage
Property | Code sample | Description
--- | --- | ---
instance | | Container id.
type\* | | Chart type.
data | | Chart data.
width/height | | 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:
`
`
is equivalent to:
`
var chart = anychart.column([3,1,2]);
chart.title("My Chart Title");
chart.legend(true);
`
#### Multiple entities (axes, line markers, grids)
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.
`
``