chartjs-plugin-rough
Chart.js plugin to create charts with a hand-drawn, sketchy, appearance
Version 0.2 requires Chart.js 2.7.0 or later, and Rough.js 2.0.1 or later.
Installation
You can download the latest version of chartjs-plugin-rough from the GitHub releases.
To install via npm:
npm install chartjs-plugin-rough --save
To install via bower:
bower install chartjs-plugin-rough --save
To use CDN:
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-rough@latest/dist/chartjs-plugin-rough.min.js"></script>
<script src="https://unpkg.com/chartjs-plugin-rough@latest/dist/chartjs-plugin-rough.min.js"></script>
Usage
chartjs-plugin-rough can be used with ES6 modules, plain JavaScript and module loaders.
chartjs-plugin-rough requires Chart.js and Rough.js. Include Chart.js, Rough.js and chartjs-plugin-rough.js to your page to render sketchy charts. Note that chartjs-plugin-rough must be loaded after the Chart.js and Rough.js libraries. Once imported, the plugin is available under the global property ChartRough.
Then, you need to register the plugin to enable it for all charts in the page.
Chart.plugins.register(ChartRough);
Or, you can enable the plugin only for specific charts.
var chart = new Chart(ctx, {
plugins: [ChartRough],
options: {
// ...
}
});
Usage in ES6 as module
Import the module as ChartRough, and register it in the same way as described above.
import ChartRough from 'chartjs-plugin-rough';
Tutorial and Samples
You can find a tutorial and samples at nagix.github.io/chartjs-plugin-rough.
Configuration
The plugin options can be changed at 3 different levels and are evaluated with the following priority:
- per dataset:
dataset.rough.* - per chart:
options.plugins.rough.* - globally:
Chart.defaults.global.plugins.rough.*
All available options are listed below. This example shows how each option affects the appearance of a chart., Name, Type, Default, Description, ----, ----, -------, -----------, roughness, number, 1, Numerical value indicating how rough the drawing is. See Rough.js., bowing, number, 1, Numerical value indicating how curvy the lines are when drawing a sketch. See Rough.js., fillStyle, string, 'hachure', String value representing the fill style. See Rough.js., fillWeight, number, 0.5, Numeric value representing the width of the hachure lines. See Rough.js., hachureAngle, number, -41, Numerical value (in degrees) that defines the angle of the hachure lines. See Rough.js., hachureGap, number, 4, Numerical value that defines the average gap, in pixels, between two hachure lines. See Rough.js., curveStepCount, number, 9, When drawing circles and arcs, the plugin approximates curveStepCount number of points to estimate the shape. See Rough.js., simplification, number, 0, When drawing lines, simplification can be set to simplify the shape by the specified factor. The value can be between 0 and 1. See Rough.js.
For example:
{
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
data: [45, 20, 64, 32, 76, 51],
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 3,
rough: {
roughness: 1,
bowing: 1,
fillStyle: 'hachure',
fillWeight: 0.5,
hachureAngle: -41,
hachureGap: 4,
curveStepCount: 9,
simplification: 0
}
}]
}
}
Note that the following line style options are ignored.
borderCapStyleborderDashborderDashOffsetborderJoinStyleborderAlign
Building
You first need to install node dependencies (requires Node.js):
npm install
The following commands will then be available from the repository root:
gulp build # build dist files
gulp build --watch # build and watch for changes
gulp lint # perform code linting
gulp package # create an archive with dist files and samples
License
chartjs-plugin-rough is available under the MIT license.