npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-chartkick

v0.5.4

Published

Create beautiful JavaScript charts with one line of React

Downloads

22,975

Readme

React Chartkick

Create beautiful JavaScript charts with one line of React

See it in action

Supports Chart.js, Google Charts, and Highcharts

Build Status

Quick Start

Run

npm install react-chartkick chart.js

And add

import { LineChart, PieChart } from 'react-chartkick'
import 'chartkick/chart.js'

This sets up Chartkick with Chart.js. For other charting libraries, see detailed instructions.

Charts

Line chart

<LineChart data={{"2025-01-01": 11, "2025-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={{"2025-01-01": 11, "2025-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: {"2025-01-01": 3, "2025-01-02": 4}},
  {name: "Call parents", data: {"2025-01-01": 5, "2025-01-02": 3}}
];

and

<LineChart data={data} />

Data

Data can be an array, object, callback, or URL.

Array

<LineChart data={[["2025-01-01", 2], ["2025-01-02", 3]]} />

Object

<LineChart data={{"2025-01-01": 2, "2025-01-02": 3}} />

Callback

function fetchData(success, fail) {
  success({"2025-01-01": 2, "2025-01-02": 3})
  // or fail("Data not available")
}

and

<LineChart data={fetchData} />

URL

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.

Min and max for x-axis - Chart.js

<LineChart xmin="2025-01-01" xmax="2025-02-01" />

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

Prefix, useful for currency - Chart.js, Highcharts

<LineChart prefix="$" />

Suffix, useful for percentages - Chart.js, Highcharts

<LineChart suffix="%" />

Set a thousands separator - Chart.js, Highcharts

<LineChart thousands="," />

Set a decimal separator - Chart.js, Highcharts

<LineChart decimal="," />

Set significant digits - Chart.js, Highcharts

<LineChart precision={3} />

Set rounding - Chart.js, Highcharts

<LineChart round={2} />

Show insignificant zeros, useful for currency - Chart.js, Highcharts

<LineChart round={2} zeros={true} />

Friendly byte sizes - Chart.js

<LineChart bytes={true} />

Specify the message when the chart is loading

<LineChart loading="Loading..." />

Specify the message when data is empty

<LineChart empty="No data" />

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.

To customize datasets in Chart.js, use:

<LineChart dataset={{borderWidth: 10}} />

You can pass this option to individual series as well.

Global Options

To set options for all of your charts, use:

Chartkick.options = {
  colors: ["#b00", "#666"]
}

Multiple Series

You can pass a few options with a series:

  • name
  • data
  • color
  • dataset - Chart.js only
  • points - Chart.js only
  • curve - Chart.js only

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.

Set the background color

<LineChart download={{background: "#fff"}} />

Installation

Chart.js

Run

npm install react-chartkick chart.js

And add

import { LineChart, PieChart } from 'react-chartkick'
import 'chartkick/chart.js'

Google Charts

Run

npm install react-chartkick

And add

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

And include on the page

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

To specify a language or Google Maps API key, use:

Chartkick.configure({language: "de", mapsApiKey: "..."})

Highcharts

Run

npm install react-chartkick highcharts

And add

import { LineChart, PieChart } from 'react-chartkick'
import 'chartkick/highcharts'

No Package Manager

Include the charting library and the Chartkick library

<script src="https://unpkg.com/[email protected]/dist/chart.umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/chartjs-adapter-date-fns.bundle.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>

Charts are prefixed with ReactChartkick, like ReactChartkick.LineChart.

Multiple Libraries

If more than one charting library is loaded, choose between them with:

<LineChart adapter="google" />

Options are google, highcharts, and chartjs

History

View the changelog

Contributing

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

To get started with development, run:

git clone https://github.com/ankane/react-chartkick.git
cd react-chartkick
npm install
npm run build