0.5.2 • Public • Published

    React Chartkick

    Create beautiful JavaScript charts with one line of React

    See it in action

    Supports Chart.js, Google Charts, and Highcharts

    Quick Start


    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.


    Line chart

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


    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="2021-01-01" xmax="2022-01-01" />


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


    Pass data as an array or object

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

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

    <LineChart data={[[new Date(), 5], ["2021-01-01 00:00:00 UTC", 7]]} />

    Data can also be a callback

    function fetchData(success, fail) {
      success({"Blueberry": 44, "Strawberry": 23})
      // or fail("Data not available")
    <PieChart data={fetchData} />

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




    npm install react-chartkick chart.js

    And add

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

    Google Charts


    npm install react-chartkick

    And add

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

    And include on the page

    <script src=""></script>

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

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



    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=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></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



    For the no package manager install, Chartkick.js is no longer bundled, allowing you to update them independently. Include it manually before React Chartkick.

    <script src=""></script>


    View the changelog


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

    To get started with development, run:

    git clone
    cd react-chartkick
    npm install
    npm run build




    npm i react-chartkick

    DownloadsWeekly Downloads






    Unpacked Size

    20.4 kB

    Total Files


    Last publish


    • ankane