chart-js-fabric
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

Chart.js + fabric.js = ❤️

This package allows you to include charts (using Chart.js) into your fabric canvases with support for all features (e.g. events, rotation, scale, etc.).

Installation

yarn add chart-js-fabric

Usage

You can use the regular API from both those great libraries as you would normally. Each fabric.Chart object has an extra "chart" propeprty where you can set your chart.js options (see below).

If using a custom fabric instance, please use the export "install" method.

import { fabric } from 'fabric'
import { install } from 'chart-js-fabric'
 
install(fabric)

Else, simply import the plugin.

import fabric from 'fabric'
import 'chart-js-fabric'
 
const instance = new fabric.Canvas('#canvas')
instance.add(new fabric.Chart({ width: 100, height: 100, chart: { type: 'bar', data: {...} })

To change the charts options, use the normal "set" method. The new options will be merged with the previous one.

const object = new fabric.Chart({
  width: 100,
  height: 100,
  chart: {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [
        {
          label: '# of Votes',
          data: [Math.random(), Math.random()],
          backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)']
        }
      ]
    }
  }
})
 
object.set({ chart: { data: [2] })
 
// object.chart = {
//     type: 'bar',
//     data: {
//       labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
//       datasets: [
//         {
//           label: '# of Votes',
//           data: [2, Math.random()],
//           backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)']
//         }
//       ]
//     }
//   }

You may add global Chart.js plugins using the utility method "addPlugin".

fabric.util.chart.addPlugin(YourPlugin)

You may also change the global default Chart.js options using the utility method "setDefaults". Your new options will be merged with the existing ones.

fabric.util.chart.setDefaults({
  options: {
    onClick() {
      alert('You clicked!')
    }
  }
})

Readme

Keywords

none

Package Sidebar

Install

npm i chart-js-fabric

Weekly Downloads

272

Version

1.0.7

License

MIT

Unpacked Size

468 kB

Total Files

16

Last publish

Collaborators

  • yassidevteam