Created
May 22, 2020 00:59
-
-
Save parke/7dbe043787d32d448240e051587f508d to your computer and use it in GitHub Desktop.
Chart JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Line Chart</title> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/[email protected]/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