Get started with react-chartkick CDN

MIT licensed

React-Chartkick: Easily renders interactive charts in React using Chart.js.

Tags:
  • charts
  • graphs

Stable version

Copied!

How to start using react-chartkick CDN


import React from 'react';
import Chart from 'react-chartkick';
import 'chart.js/auto'; // Import Chart.js library for automatic chart rendering

class LineChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
      series: [
        [12, 19, 3, 5, 21, 34, 12],
        [2, 7, 4, 8, 10, 3, 4],
      ],
    };
  }

  render() {
    return (
      <div>
        <h1>Line Chart Example</h1>
        <Chart type="Line" height={400} data={this.state.series} labels={this.state.labels} />
      </div>
    );
  }
}

export default LineChart;
Copied!
Copied!

All versions