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>
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],
borderColor: 'rgba(0, 0, 0, 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. Enable the glow effect when hovering.
data: {
...
datasets: [{
...
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)',
hoverShadowOffsetX: 0,
hoverShadowOffsetY: 0,
hoverShadowBlur: 20,
hoverShadowColor: 'rgba(255, 255, 0, 1)'
}]
},
options: {
tooplips: {
...
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
});
Line Chart
Bubble Chart
Doughnut Chart
Radar Chart
See also GitHub repository