Chart.js is not respecting my container dimensions

Question

I'm trying to create a line chart using the Chart.js library. I've got a div with dimensions 600px wide by 250px height, and from what I've read the library is meant to create a line chart using these parent dimensions.

The following shows my HTML element:

<div style="width:600px;height:250px">     <canvas id="myChart"></canvas> </div> 

This is the code I'm using:

$(document).ready(function(){      var data = {                     labels: ["January", "February", "March", "April", "May", "June", "July"],                     datasets: [                         {                             label: "My First dataset",                             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: [65, 59, 80, 81, 56, 55, 40]                         },                         {                             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: [28, 48, 40, 19, 86, 27, 90]                         }                     ]                 };                 var ctx = $("#myChart").get(0).getContext("2d");                 new Chart(ctx).Line(data, {                     responsive:true                 }); }); 

And this shows the issue I'm having in jsfiddle: https://jsfiddle.net/Lr88htnp/ (Note that the rendered chart has dimensions of 600x300)

Answer 1

You need to set the option maintainAspectRatio to false

.... new Chart(ctx).Line(data, {     responsive:true,     maintainAspectRatio: false }); 

---

Fiddle - https://jsfiddle.net/3cxeyLc8/

Answer 2

Add the following CSS to #myChart:

 <canvas id="myChart" style="width:100%;height:100%;"></canvas>