React Chartkick - Create beautiful charts with one line of React

[Fi8sVrs]

React Chartkick

Create beautiful charts with one line in React

See it in action

Supports Chart.js, Google Charts, and Highcharts

 

Charts

Line chart

<LineChart data={{"2013-02-10 00:00:00 -0800": 11, "2013-02-11 00:00:00 -0800": 6}} />

Pie chart

<PieChart data={[["Blueberry", 44], ["Strawberry", 23]]} />

Column chart

<ColumnChart data={[["Sun", 32], ["Mon", 46], ["Tue", 28]]} />

Bar chart

<BarChart data={[["Work", 32], ["Play", 1492]]} />

Area chart

<AreaChart data={{"2013-02-10 00:00:00 -0800": 11, "2013-02-11 00:00:00 -0800": 6}} />

Scatter chart

<ScatterChart data={[[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9]]} />

Geo chart - Google Charts

<GeoChart data={[["United States", 44], ["Germany", 23], ["Brazil", 22]]} />

Timeline - Google Charts

<Timeline data={[["Washington", "1789-04-29", "1797-03-03"],["Adams", "1797-03-03", "1801-03-03"]]} />

Multiple series

data = [
  {"name":"Workout", "data": {"2013-02-10 00:00:00 -0800": 3, "2013-02-17 00:00:00 -0800": 4}},
  {"name":"Call parents", "data": {"2013-02-10 00:00:00 -0800": 5, "2013-02-17 00:00:00 -0800": 3}}
];

// and
<LineChart data={data} />

 

Say Goodbye to Timeouts

Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.

<LineChart data="/stocks" />

 

Options

Id, width, and height

<LineChart id="users-chart" width="800px" height="500px" />

Min and max values

<LineChart min={1000} max={5000} />

min defaults to 0 for charts with non-negative values. Use null to let the charting library decide

 

Colors

<LineChart colors={["#b00", "#666"]} />

Stacked columns or bars

<ColumnChart stacked={true} />

Discrete axis

<LineChart discrete={true} />

Label (for single series)

<LineChart label="Value" />

Axis titles

<LineChart xtitle="Time" ytitle="Population" />

Straight lines between points instead of a curve

<LineChart curve={false} />

Show or hide legend

<LineChart legend={true} />

Specify legend position

<LineChart legend="bottom" />

Donut chart

<PieChart donut={true} />

Refresh data from a remote source every n seconds

<LineChart refresh={60} />

You can pass options directly to the charting library with:

<LineChart library={{backgroundColor: "#eee"}} />

See the documentation for Google Charts, Highcharts, and Chart.js for more info.

 

 

Data

Pass data as an array or object

<PieChart data={{"Blueberry": 44, "Strawberry": 23}} />
<PieChart data={[["Blueberry", 44], ["Strawberry", 23]]} />

Times can be a Date, a timestamp, or a string (strings are parsed)

<LineChart data={[[new Date(), 5], [1368174456, 4], ["2013-05-07 00:00:00 UTC", 7]]} />

 

Download Charts

Chart.js only

Give users the ability to download charts. It all happens in the browser - no server-side code needed.

<LineChart download={true} />

Set the filename

<LineChart download="boom" />

Note: Safari will open the image in a new window instead of downloading.

 

Installation

Run

npm install chartkick react-chartkick --save

And import the chart types you want

import { LineChart, PieChart } from 'react-chartkick';

 

Chart.js

npm install chart.js --save

And add

window.Chart = require('chart.js');

 

Google charts

Include

<script src="https://www.gstatic.com/charts/loader.js"></script>

 

Highcharts

Run

npm install highcharts --save

And add

window.Highcharts = require('highcharts');

 

Without NPM

Include the charting library

<script src="https://unpkg.com/chart.js@2.7.1/dist/Chart.bundle.js"></script>

And then the Chartkick libraries

<script src="https://unpkg.com/chartkick@2.2.4"></script>
<script src="dist/react-chartkick.js"></script>

 

Contribuiting

Everyone is encouraged to help improve this project. Here are a few ways you can help:

• Report bugs
• Fix bugs and submit pull requests
• Write, clarify, or fix documentation
• Suggest or add new features

 

Download react-chartkick-master.zip

or

git clone https://github.com/ankane/react-chartkick.git

 

Source: https://github.com/ankane/react-chartkick