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/[email protected]/dist/chartjs-plugin-rough.min.js"></script>

<script src="https://unpkg.com/[email protected]/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.

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.

• borderCapStyle
• borderDash
• borderDashOffset
• borderJoinStyle
• borderAlign

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.