JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8169
  • Score
    100M100P100Q121800F
  • License MIT

Create beautiful Javascript charts with minimal code

Package Exports

  • react-chartkick

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-chartkick) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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"]]} />

Options

Width and height

<LineChart data={data} width="800px" height="500px" />

Min and max values

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

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

Colors

<LineChart data={data} colors={["pink", "#999"]} />

Stacked columns or bars

<ColumnChart data={data} stacked={true} />

Discrete axis

<LineChart data={data} discrete={true} />

Label (for single series)

<LineChart data={data} label="Value" />

Axis titles

<LineChart data={data} xtitle="Time" ytitle="Population" />

You can pass options directly to the charting library with:

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

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

Installation

Run

npm install chartkick react-chartkick --save

And import the chart types you want

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

Chart.js

Run

npm install chart.js --save

And add

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

Google Charts

Include

<script src="//www.google.com/jsapi"></script>

Highcharts

Run

npm install highcharts --save

And add

window.Highcharts = require('highcharts');

Contributing

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