Active Members Fi8sVrs Posted November 21, 2017 Active Members Report Posted November 21, 2017 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 Quote
