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.
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>
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: {
// ...
}
});
Import the module as ChartRough, and register it in the same way as described above.
import ChartRough from 'chartjs-plugin-rough';
You can find a tutorial and samples at nagix.github.io/chartjs-plugin-rough.
The plugin options can be changed at 3 different levels and are evaluated with the following priority:
dataset.rough.*options.plugins.rough.*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 Descriptionroughness 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.
borderCapStyleborderDashborderDashOffsetborderJoinStyleborderAlignYou first need to install node dependencies (requires Node.js):
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
chartjs-plugin-rough is available under the MIT license.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4