react-chartkick

    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

    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={{"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" />

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

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

    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/chart.js@3.4.1"></script>
    <script src="https://unpkg.com/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.js"></script>
    <script src="https://unpkg.com/chartkick@4.0.5"></script>
    <script src="https://unpkg.com/react-chartkick@0.5.2"></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

    Upgrading

    0.5.0

    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="https://unpkg.com/chartkick@4.0.2"></script>

    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

    Keywords

    none

    Install

    npm i react-chartkick

    DownloadsWeekly Downloads

    6,290

    Version

    0.5.2

    License

    MIT

    Unpacked Size

    20.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • ankane