Facebook Pixel

React Plugin for AnyChart

Intuitive and easy to use React plugin that allows you to create and work with AnyChart JavaScript Charts.
View on GitHub

Table of Contents


Download and install

There are several ways to download/install AnyChart-React.

  • Direct download

    Binaries are located in dist folder.

  • Package managers

    You can install AnyChart-React using npm, bower or yarn:


npm install anychart-react
                            

bower install anychart-react
                            

yarn add anychart-react

Quick start

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'));

Examples Overview

See examples to learn how things work:

Chart with JSON
Charts with Controls
Choropleth Map
Data Streaming
Multiseries column chart
Simple Dashboard
Stock Chart
Tabs

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 <example_name>

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.


Usage

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);

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.


<AnyChart yAxis={[1, {enabled: true}]} />

Such settings are shown in Chart_with_JSON Settings example.


License

© AnyChart.com - JavaScript charts. AnyChart React plugin is released under the Apache 2.0 License.