Create beautiful JavaScript charts with one line of React
Supports Chart.js, Google Charts, and Highcharts
Line chart
<LineChart data={{"2017-01-01": 11, "2017-01-02": 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={{"2017-01-01": 11, "2017-01-02": 6}} />Scatter chart
<ScatterChart data={[[174.0, 80.0], [176.5, 82.3]]} xtitle="Size" ytitle="Population" />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": {"2017-01-01": 3, "2017-01-02": 4}},
{"name":"Call parents", "data": {"2017-01-01": 5, "2017-01-02": 3}}
];
// and
<LineChart data={data} />Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.
<LineChart data="/stocks" />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.
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], ["2017-01-01 00:00:00 UTC", 7]]} />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.
Run
npm install chartkick react-chartkick --saveAnd import the chart types you want
import { LineChart, PieChart } from 'react-chartkick';Run
npm install chart.js --saveAnd add
window.Chart = require('chart.js');Include
<script src="https://www.gstatic.com/charts/loader.js"></script>Run
npm install highcharts --saveAnd add
window.Highcharts = require('highcharts');Include the charting library
<script src="https://unpkg.com/[email protected]/dist/Chart.bundle.js"></script>And then the Chartkick libraries
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>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
To get started with development, run:
git clone https://github.com/ankane/react-chartkick.git
cd react-chartkick
yarn
npm run build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent