First, we need to include Chart.js and chartjs-plugin-style.js in our page.
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="chartjs-plugin-style.js"></script>
Or with ES6 module import
import 'chartjs-plugin-style';
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.
Use the default settings for now. These can be tweaked later.
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],
borderWidth: 0,
backgroundColor: 'rgb(255, 99, 132)'
}]
}
});
Let's make it a bit 3D-ish by adding the bevel effect to the dataset and the tooltip.
data: {
...
datasets: [{
...
bevelWidth: 3,
bevelHighlightColor: 'rgba(255, 255, 255, 0.75)',
bevelShadowColor: 'rgba(0, 0, 0, 0.5)'
}]
},
options: {
tooplips: {
bevelWidth: 3,
bevelHighlightColor: 'rgba(255, 255, 255, 0.75)',
bevelShadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
});
You can also add drop shadows.
data: {
...
datasets: [{
...
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)',
}]
},
options: {
tooplips: {
...
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
});
Enable the glow effect when hovering.
data: {
...
datasets: [{
...
hoverInnerGlowWidth: 20,
hoverInnerGlowColor: 'rgb(255, 255, 0)',
hoverOuterGlowWidth: 20,
hoverOuterGlowWidth: 'rgb(255, 255, 0)'
}]
},
...
Colors, gradations and patterns can be overlaid.
var img = new Image();
img.src = 'blocks.png';
img.onload = function() {
...
data: {
...
datasets: [{
...
backgroundOverlayColor: ctx.createPattern(img, null),
backgroundOverlayMode: 'multiply',
}]
},
...
See also GitHub repository and samples