First, we need to include Chart.js and chartjs-plugin-colorschemes.js in our page.
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="chartjs-plugin-colorschemes.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.
Random number datasets are generated in this example.
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [1, 2, 3].map(function(i) {
return {
label: 'Dataset ' + i,
data: [0, 0, 0, 0, 0, 0, 0].map(Math.random),
fill: false
};
})
}
});
We can pick a color scheme from Color Chart.
...
options: {
plugins: {
colorschemes: {
scheme: 'brewer.Paired12'
}
}
}
Color Scheme: Number of Datasets:
See also GitHub repository and Color Chart