First, we need to include Chart.js, Rough.js and chartjs-plugin-rough.js in our page.
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="rough.js"></script>
<script type="text/javascript" src="chartjs-plugin-rough.js"></script>
We need to have a canvas in our page.
<canvas id="myChart"></canvas>
Now, we can create a chart. We add a script to our page.
Don't forget to specify ChartRough as a plugins option.
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
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
}]
},
plugins: [ChartRough]
});
You can pass in options that control how rough the drawing is
and how curvy the lines are when drawing a sketch.
...
data: {
...
datasets: [{
...
rough: {
roughness: 2,
bowing: 2
}
}]
},
...
You can also specify options that control a fill style, the width and the angle
of the hachure lines and the average gap between two hachure lines.
See the Rough.js documentation for more details.
data: {
...
datasets: [{
...
rough: {
...
fillStyle: 'cross-hatch',
fillWeight: 0.25,
hachureAngle: 15,
hachureGap: 12
}
}]
},
...
Hand-writing fonts will best match sketchy charts.
You can easily use web fonts such as Indie Flower.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower">
Chart.defaults.global.defaultFontFamily = '"Indie Flower", cursive';
Chart.defaults.global.defaultFontSize = 14;
var chart = new Chart(ctx, {
...
See also GitHub repository and samples