Javascript examples for Chart.js:Chart Configuration
Set chart size
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> <style id="compiled-css" type="text/css"> #wrapper {//from w ww .j a v a2 s .c o m width: 400px; height: 500px; } </style> <script type="text/javascript"> window.onload=function(){ $(function() { displayLineChart(); function displayLineChart() { var data = { labels: ['first', 2, 3, 4, 5, 6, 7, 8, 9, 10], datasets: [{ label: "Prime and Fibonacci", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34] }] }; var chart = document.getElementById("lineChart"); chart.width = 100; chart.height = 100; var ctx = document.getElementById("lineChart").getContext("2d"); ctx.canvas.width = 100; ctx.canvas.height = 100; var options = {}; var lineChart = new Chart(ctx, { type: 'line', data: data, }); } }); } </script> </head> <body> <div id="wrapper"> <canvas id="lineChart"> </canvas> </div> </body> </html>