https://github.com/634750802/chartjs-plugin-roughness

Handwrite style plugin for chart.js.
https://github.com/634750802/chartjs-plugin-roughness

chartjs roughjs roughness

Last synced: about 2 months ago
JSON representation

Handwrite style plugin for chart.js.

• Host: GitHub
• URL: https://github.com/634750802/chartjs-plugin-roughness
• Owner: 634750802
• Created: 2023-06-04T04:07:12.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-25T08:06:48.000Z (almost 2 years ago)
• Last Synced: 2024-10-18T16:25:55.396Z (8 months ago)
• Topics: chartjs, roughjs, roughness
• Language: JavaScript
• Homepage:
• Size: 121 KB
• Stars: 5
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# chartjs-plugin-roughness

![demo](demo/rs-canvas/image.png)

## Usage

### h5

```js

import 'chartjs-plugin-roughness'

new Chart(..., {

  ...,

  plugins: {

    roughness: {

      disabled: true // enable by default if imported chartjs-plugin-roughness

      // more rough options

    }

  }

})

```

### SSR

`@napi-rs/canvas` is supported for SSR, see [demo](demo/rs-canvas).

### Rough Options

See [rough options](https://github.com/rough-stuff/rough/wiki#options) for more options.

### Caution

- This package should be imported before `chart.js`.

- This package [override](./bar.element.patch.js) `BarElement.draw` method if roughness was enabled.

- This package [override](./filler.patch.js) `Filler` hooks for clearing stroke colors to prevent area border.

- This package [override](./context2d.patch.js) `beginPath`, `closePath`, `fill`, `stroke`, `moveTo`, `lineTo`, `arcTo`,

  `arc`, `quadraticCurveTo`, `rect`, `ellipse`, `bezierCurveTo` while roughness chart rendering. `ellipse` was **not**

  implemented by `roughjs`, you should provide your own polyfill if you want this feature.

- This package [override](./path2d.patch.js) `window.Path2D` class and should act same as original.

- This package [override](./tooltip.patch.js) `TooltupPlugin` class to skip drawing tooltip background using roughness.

  Set tooltip plugin option `preventSkipBackgroundRoughness` to `true` to prevent it.