37

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)

2
  • Are you using any external CSS associated with #myChart?
    – Bangkokian
    Commented Sep 8, 2015 at 14:07
  • no, you can see the issue in the jsfiddle, there's literally no CSS apart from the inline style I used to highlight it
    – andrewm
    Commented Sep 8, 2015 at 14:08

3 Answers 3

72

You need to set the option maintainAspectRatio to false

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

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

4
  • 2
    this is now an outdated way to create charts as of chart.js version 2
    – A Friend
    Commented Oct 19, 2017 at 12:56
  • 2
    Ahhh finally, nearly a dozen of topics and no one mentioned this aspect ratio. Good job !
    – Eta
    Commented Jan 19, 2018 at 17:26
  • 3
    @AFriend maybe so, but the maintainAspectRatio option is still available, and fixes the problem.
    – bvdb
    Commented Jan 22, 2019 at 11:51
  • This still works and is the way to go, I think.
    – HartleySan
    Commented Aug 15, 2023 at 22:28
17

Add the following CSS to #myChart:

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

Setting width and height 100% work for me

<LineChart :chart-data="chartData1" :options="options" style="width: 100%; height: 100%" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.