1👍
You might also wish to consider the chart.js fork called chartNew.js.
chartNew.js is a fork of the 1.0 version of chart.js, but they retained the 1.0 format (keeping everything backwards compatible and, frankly, much simpler) but they added a number of new features (many of which are now included in chart.js version 2).
Additionally, the chartNew.js development team is very responsive and will often respond to new posted issues (i.e. requests for help) very quickly.
There are some excellent sample solutions here
Here is an example of the chartNew.js code:
var mydata1 = {
labels : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets : [
{
fillColor : "rgba(151,187,205,0)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
]
}
var mydata2 = {
labels : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets : [
{
fillColor : "rgba(151,187,205,0)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
]
}
var setopts = {
animation : false
}
var myLine1 = new Chart(document.getElementById("canvas_1").getContext("2d")).Line(mydata1,setopts);
var myLine2 = new Chart(document.getElementById("canvas_2").getContext("2d")).Line(mydata2,setopts);
<SCRIPT src='https://rawgit.com/FVANCOP/ChartNew.js/master/ChartNew.js'></script>
<!-- <SCRIPT src='https://rawgit.com/nnnick/Chart.js/master/Chart.js'></script> -->
<canvas id="canvas_1" height="200" width="450"></canvas>
<canvas id="canvas_2" height="200" width="450"></canvas>
And a couple of jsFiddle demos to play with:
- Chartjs-Inserting an array in Chart.JS
- Chartjs-ChartJS Bar Issue – Showing "zeros" and not center bars
Source:stackexchange.com