Modular-React-Charts-Made-with-d3.js

Modular React charts made with d3.js

Update

Important update:

The actively maintained fork of this project is now at the Github of react-d3 co-creator yang-wei, who has recently taken the lead in maintaining the project and moving toward 1.0.

Yang Wei’s fork is located here.

react-d3

Modular ReactJS charts made using d3 chart utilities. Work on project documentation has started here. A few examples of the available charts can be seen below, the others can be viewed here, side-by-side with the React code that generates the charts.

react-d3 chart images

Build Status

Version

npm version

Basic usage

First, install via npm:

npm install react<span class="token operator">-</span>d3
JavaScript

Then, import into your ReactJS project:

<span class="token keyword">var</span> rd3 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'react-d3'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// es6</span>
<span class="token keyword">import</span> rd3 <span class="token keyword">from</span> <span class="token string">'react-d3'</span><span class="token punctuation">;</span>
JavaScript

The charts are then available under the rd3 namespace, which you can then use as shown on the demonstration page:

If you don’t wish to pull in all the charts, you can also require single chart:

<span class="token keyword">var</span> BarChart <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'react-d3/barchart'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>BarChart<span class="token punctuation">;</span>
<span class="token comment">// es6</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> BarChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-d3'</span><span class="token punctuation">;</span>
JavaScript

Available Charts

<span class="token keyword">var</span> BarChart <span class="token operator">=</span> rd3<span class="token punctuation">.</span>BarChart<span class="token punctuation">;</span>
<span class="token keyword">var</span> LineChart <span class="token operator">=</span> rd3<span class="token punctuation">.</span>LineChart<span class="token punctuation">;</span>
<span class="token keyword">var</span> PieChart <span class="token operator">=</span> rd3<span class="token punctuation">.</span>PieChart<span class="token punctuation">;</span>
<span class="token keyword">var</span> AreaChart <span class="token operator">=</span> rd3<span class="token punctuation">.</span>AreaChart<span class="token punctuation">;</span>
<span class="token keyword">var</span> Treemap <span class="token operator">=</span> rd3<span class="token punctuation">.</span>Treemap<span class="token punctuation">;</span>
<span class="token keyword">var</span> ScatterChart <span class="token operator">=</span> rd3<span class="token punctuation">.</span>ScatterChart<span class="token punctuation">;</span>
<span class="token keyword">var</span> CandleStickChart <span class="token operator">=</span> rd3<span class="token punctuation">.</span>CandleStickChart<span class="token punctuation">;</span>
JavaScript

For usage, please see hereAPI documentation is also coming online over the coming days.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares