Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-bulma-chartjs with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactBulmaChartjs = require("react-bulma-chartjs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-bulma-chartjs v0.0.6

Chartjs component is based on chart.js for React

react-chartjs

Chartjs component is based on chart.js for React

Installation

npm install react-bulma-chartjs

Usage

import Chart from 'react-bulma-chartjs';

const data =  {
      labels: [
        'Red', 'Green', 'Yellow'
      ],
      datasets: [
        {
          data: [
            300, 50, 100
          ],
          backgroundColor: [
            '#FF6384', '#36A2EB', '#FFCE56'
          ],
          hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }
      ]
    };
const options = {
      animateRotate: true
    };

const App => () =>
  <div>
      // doughnut
      <Chart type={'doughnut'} data={data} options={options}/>

      // pie
        <Chart type={'pie'} data={data} options={options}/>
  </div>

export default App

Chart type

  • bar
  • doughnut
  • line
  • pie
  • polarArea
  • radar
  • scatter
  • bubble
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free