Simple, clean and engaging HTML5 based JavaScript charts. An easy way to include animated, interactive graphs on your website.
Below is the basic bar chart example.
Javascript Code
var ctx = document.getElementById('chartBar1').getContext('2d');new Chart(ctx, { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: '# of Votes', data: [12, 39, 20, 10, 25, 18], backgroundColor: '#27AAC8' }] }, options: { legend: { display: false, labels: { display: false } }, scales: { yAxes: [{ ticks: { beginAtZero:true, fontSize: 10, max: 80 } }], xAxes: [{ ticks: { beginAtZero:true, fontSize: 11 } }] } }});
Multiple Color Code
backgroundColor: [ '#29B0D0', '#2A516E', '#F07124', '#CBE0E3', '#979193']
Below is the horizontal bar chart type example.
Horizontal Type Code
type: 'horizontalBar'
Below are the vertical and horizontal bar chart example.
Source Code
scales: { yAxes: [{ stacked: true }], xAxes: [{ stacked: true }]}
Below is the basic line chart example.
Source Code
type: 'line'
Below is the basic an area chart example.
Source Code
datasets: [{ data: [12, 39, 20, 10, 25, 18], fill: true,}]
Below are an example of specific grid line coloring.
Source Code
options: { scales: { yAxes: [{ gridLines: { color: ['', '', '#cc0000'] // the line color series } }] }}
Below are an example of data in a pie and donut chart.
Source Code
var pie = document.getElementById('chartDonut');var myPieChart = new Chart(pie, { type: 'pie', data: data, options: option});
Source Code
var pie = document.getElementById('chartDonut');var myPieChart = new Chart(pie, { type: 'doughnut', data: data, options: option});