{"id":13701944,"url":"https://github.com/nagix/chartjs-plugin-rough","last_synced_at":"2025-05-04T19:34:57.457Z","repository":{"id":57197187,"uuid":"165082324","full_name":"nagix/chartjs-plugin-rough","owner":"nagix","description":"Chart.js plugin to create charts with a hand-drawn, sketchy, appearance","archived":false,"fork":false,"pushed_at":"2023-03-13T14:35:36.000Z","size":150,"stargazers_count":93,"open_issues_count":5,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-08T11:12:58.491Z","etag":null,"topics":["chartjs","hand-drawn","plugin","roughjs","sketch"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nagix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-01-10T15:19:38.000Z","updated_at":"2025-03-25T22:57:52.000Z","dependencies_parsed_at":"2024-01-14T19:14:09.678Z","dependency_job_id":"ab889dd9-2357-48ef-a2bf-e8ada2124df0","html_url":"https://github.com/nagix/chartjs-plugin-rough","commit_stats":{"total_commits":18,"total_committers":1,"mean_commits":18.0,"dds":0.0,"last_synced_commit":"6224302a8c2fdbb243604551ac48293bfa608e75"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nagix%2Fchartjs-plugin-rough","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nagix%2Fchartjs-plugin-rough/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nagix%2Fchartjs-plugin-rough/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nagix%2Fchartjs-plugin-rough/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nagix","download_url":"https://codeload.github.com/nagix/chartjs-plugin-rough/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252390144,"owners_count":21740262,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chartjs","hand-drawn","plugin","roughjs","sketch"],"created_at":"2024-08-02T21:00:28.061Z","updated_at":"2025-05-04T19:34:57.209Z","avatar_url":"https://github.com/nagix.png","language":"JavaScript","readme":"# chartjs-plugin-rough\n\n[![npm](https://img.shields.io/npm/v/chartjs-plugin-rough.svg?style=flat-square)](https://npmjs.com/package/chartjs-plugin-rough) [![Bower](https://img.shields.io/bower/v/chartjs-plugin-rough.svg?style=flat-square)](https://libraries.io/bower/chartjs-plugin-rough) [![Travis](https://img.shields.io/travis/com/nagix/chartjs-plugin-rough/master.svg?style=flat-square)](https://travis-ci.com/nagix/chartjs-plugin-rough) [![Code Climate](https://img.shields.io/codeclimate/maintainability/nagix/chartjs-plugin-rough.svg?style=flat-square)](https://codeclimate.com/github/nagix/chartjs-plugin-rough) [![Awesome](https://awesome.re/badge-flat2.svg)](https://github.com/chartjs/awesome)\n\n*[Chart.js](https://www.chartjs.org) plugin to create charts with a hand-drawn, sketchy, appearance*\n\nVersion 0.2 requires Chart.js 2.7.0 or later, and [Rough.js](https://roughjs.com) 2.0.1 or later.\n\n## Installation\n\nYou can download the latest version of chartjs-plugin-rough from the [GitHub releases](https://github.com/nagix/chartjs-plugin-rough/releases/latest).\n\nTo install via npm:\n\n```bash\nnpm install chartjs-plugin-rough --save\n```\n\nTo install via bower:\n\n```bash\nbower install chartjs-plugin-rough --save\n```\n\nTo use CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/chartjs-plugin-rough@latest/dist/chartjs-plugin-rough.min.js\"\u003e\u003c/script\u003e\n```\n```html\n\u003cscript src=\"https://unpkg.com/chartjs-plugin-rough@latest/dist/chartjs-plugin-rough.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nchartjs-plugin-rough can be used with ES6 modules, plain JavaScript and module loaders.\n\nchartjs-plugin-rough requires [Chart.js](https://www.chartjs.org) and [Rough.js](https://roughjs.com). 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`.\n\nThen, you need to register the plugin to enable it for all charts in the page.\n\n```js\nChart.plugins.register(ChartRough);\n```\n\nOr, you can enable the plugin only for specific charts.\n\n```js\nvar chart = new Chart(ctx, {\n    plugins: [ChartRough],\n    options: {\n        // ...\n    }\n});\n```\n\n### Usage in ES6 as module\n\nImport the module as `ChartRough`, and register it in the same way as described above.\n\n```js\nimport ChartRough from 'chartjs-plugin-rough';\n```\n\n## Tutorial and Samples\n\nYou can find a tutorial and samples at [nagix.github.io/chartjs-plugin-rough](https://nagix.github.io/chartjs-plugin-rough).\n\n## Configuration\n\nThe plugin options can be changed at 3 different levels and are evaluated with the following priority:\n\n- per dataset: `dataset.rough.*`\n- per chart: `options.plugins.rough.*`\n- globally: `Chart.defaults.global.plugins.rough.*`\n\nAll available options are listed below. [This example](https://nagix.github.io/chartjs-plugin-rough/samples/interactions.html) shows how each option affects the appearance of a chart.\n\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `roughness` | `number` | `1` | Numerical value indicating how rough the drawing is. See [Rough.js](https://github.com/pshihn/rough/wiki#roughness).\n| `bowing` | `number` | `1` | Numerical value indicating how curvy the lines are when drawing a sketch. See [Rough.js](https://github.com/pshihn/rough/wiki#bowing).\n| `fillStyle` | `string` | `'hachure'` | String value representing the fill style. See [Rough.js](https://github.com/pshihn/rough/wiki#fillstyle).\n| `fillWeight` | `number` | `0.5` | Numeric value representing the width of the hachure lines. See [Rough.js](https://github.com/pshihn/rough/wiki#fillweight).\n| `hachureAngle` | `number` | `-41` | Numerical value (in degrees) that defines the angle of the hachure lines. See [Rough.js](https://github.com/pshihn/rough/wiki#hachureangle).\n| `hachureGap` | `number` | `4` | Numerical value that defines the average gap, in pixels, between two hachure lines. See [Rough.js](https://github.com/pshihn/rough/wiki#hachuregap).\n| `curveStepCount` | `number` | `9` | When drawing circles and arcs, the plugin approximates `curveStepCount` number of points to estimate the shape. See [Rough.js](https://github.com/pshihn/rough/wiki#curvestepcount).\n| `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](https://github.com/pshihn/rough/wiki#simplification).\n\nFor example:\n\n```js\n{\n    type: 'bar',\n    data: {\n        labels: ['January', 'February', 'March', 'April', 'May', 'June'],\n        datasets: [{\n            data: [45, 20, 64, 32, 76, 51],\n            backgroundColor: 'rgb(255, 99, 132)',\n            borderColor: 'rgb(255, 99, 132)',\n            borderWidth: 3,\n            rough: {\n                roughness: 1,\n                bowing: 1,\n                fillStyle: 'hachure',\n                fillWeight: 0.5,\n                hachureAngle: -41,\n                hachureGap: 4,\n                curveStepCount: 9,\n                simplification: 0\n            }\n        }]\n    }\n}\n```\n\nNote that the following line style options are ignored.\n\n- `borderCapStyle`\n- `borderDash`\n- `borderDashOffset`\n- `borderJoinStyle`\n- `borderAlign`\n\n## Building\n\nYou first need to install node dependencies (requires [Node.js](https://nodejs.org/)):\n\n```bash\nnpm install\n```\n\nThe following commands will then be available from the repository root:\n\n```bash\ngulp build            # build dist files\ngulp build --watch    # build and watch for changes\ngulp lint             # perform code linting\ngulp package          # create an archive with dist files and samples\n```\n\n## License\n\nchartjs-plugin-rough is available under the [MIT license](https://opensource.org/licenses/MIT).\n","funding_links":[],"categories":["Plugins"],"sub_categories":["Styling"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnagix%2Fchartjs-plugin-rough","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnagix%2Fchartjs-plugin-rough","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnagix%2Fchartjs-plugin-rough/lists"}