i'm trying make graph charts.js (current 1 simple example i'm trying working, taken chart.js documentation) , graph isn't scaling size of canvas i'm giving it. here relevant code.
to import it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.1.6/chart.bundle.min.js"></script>
then, connect javascript file follows:
<script type="text/javascript" src="js/stats_tab.js"></script>
i have canvas set up:
<div id="graph_2015" class ="stats_box"> <h4>graph 2015</h4> text <canvas id="mychart" width="200" height="200"></canvas> </div>
and in stats_tab.js, have following code:
window.onload=function(){ var ctx = document.getelementbyid("mychart").getcontext("2d"); var mychart = new chart(ctx, { type: 'line', data: { labels: [1,2,3,4,5,6,7,8,9,10], datasets: [ { label: "my first dataset", data: [1,2,3,2,1,2,3,4,5,4] } ] }, options: { } }); }
the graph displays nicely, refuses scale size of canvas gave it. there no css relevant of divs involved. inspect feature on chrome lets me know final graph 676 676 instead of 200 200 specified. not sure what's going on.
thanks!
the width , height property set canvas work if chartjs' responsive mode false (which true default). change stats_tab.js , work.
window.onload=function(){ var ctx = document.getelementbyid("mychart").getcontext("2d"); var mychart = new chart(ctx, { type: 'line', data: { labels: [1,2,3,4,5,6,7,8,9,10], datasets: [ { label: "my first dataset", data: [1,2,3,2,1,2,3,4,5,4] } ] }, options: { responsive: false } }); }
Comments
Post a Comment