Skip to content

Instantly share code, notes, and snippets.

@parke

parke/chart.html

Created May 22, 2020 00:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save parke/7dbe043787d32d448240e051587f508d to your computer and use it in GitHub Desktop.
Save parke/7dbe043787d32d448240e051587f508d to your computer and use it in GitHub Desktop.
Download ZIP
Chart JS
Raw
chart.html
<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script
src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"
></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style='height:400px; width:400px' >
<canvas id="myChart" style='height:400px; width:400px' ></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [
{ x: 0, y: 20},
{ x: 10, y: 10},
{ x: 30, y: 30},
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment