Chart.js is a popular JavaScript library that enables the creation of various types of charts.
Check this example to explore how to use Rough.js with Chart.js, a library that adds a hand-drawn, sketchy effect to charts. You can also use the custom font for chart.
I am using "Indie Flower" font. You can add your font from google.
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower"><link rel="stylesheet" href="./style.css">
</head>
<body>
<canvas id="myChart"></canvas>
<div class="slidecontainer">
<h4>Roughness</h4>
<input type="range" min="0" max="10" value="1" class="slider" id="rnSlider">
</div>
<script src='https://cdn.jsdelivr.net/npm/chart.js@2.8.0'></script>
<script src='https://cdn.jsdelivr.net/npm/roughjs@3.1.0/dist/rough.js'></script>
<script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-rough@0.2.0'></script>
</body>
</html>
Script
Chart.defaults.global.defaultFontFamily = '"Indie Flower", cursive';
Chart.defaults.global.defaultFontSize = 14;
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: 1,
label:"Orders"
}]
},
plugins: [ChartRough],
options:{
plugins:{
rough: {
roughness:1,
}
}
}
});
var slider = document.getElementById("rnSlider");
slider.oninput = function() {
chart.options.plugins.rough.roughness = this.value;
chart.update()
}
Top comments (0)