Cannot change chart.js size

Question

<html>
<head>
  <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/css/graph2.css">
  <title>Graph</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

</head>
<body>
    <canvas id="updating-chart" width="200" height="200"></canvas>
</body>
</html>

That is the html I am using and I am using Chart.js 2.1.4, but I am unable to reduce the size no matter what I do.

Javascript:

<script type="text/javascript">
var canvas = document.getElementById('updating-chart'),
    ctx = canvas.getContext('2d'),
    startingData = {
      labels: ["A", "B", "C", "D"],
      datasets: [
          {
             label: "Product A",
             fillColor: "rgba(220,220,220,0.5)",
             strokeColor: "rgba(220,220,220,0.8)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              data: [65, 59, 80, 81]
          }
      ]
    };

var myLiveChart = new Chart(ctx,{
  type: 'bar',
  data: startingData,
  responsive: true,
  maintainAspectRatio: true
});
</script>

How can I fix this? I always a get a really big graph, covering the whole screen completely no matter what I change in the canvas HTML fields.

Help?

Could you edit your post to include the contents of /css/graph2.css, at least anything involving the canvas or related to it? — Sᴀᴍ Onᴇᴌᴀ
– Sᴀᴍ Onᴇᴌᴀ, Commented Apr 25, 2017 at 3:28

Pango · Accepted Answer · 2017-04-25 03:34:28Z

1

If you put the canvas in container and use CSS to set the width on that, it will size the graph.

https://jsfiddle.net/ug5eczp2/1/

HTML:

<section>
    <canvas id="updating-chart" width="200" height="200"></canvas>
</section>

CSS:

section {
  width: 50%;
}

answered Apr 25, 2017 at 3:34

Pango

6735 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SushiGuy Over a year ago

jsfiddle sample is what put me over the top - in chart options both responsive: true and maintainAspectRatio: true were needed

blecaf · Accepted Answer · 2017-04-25 03:41:07Z

0

The canvas will fit the section container. Code below. just change the width of the section to the value you want.

<section>
    <canvas id="updating-chart" ></canvas>
</section>

section {
 width: 100%;
}
section > canvas {
 top: 0;
bottom: 0;
right: 0;
left: 0;
}

answered Apr 25, 2017 at 3:41

blecaf

1,6451 gold badge10 silver badges13 bronze badges

Comments

Gusti Arya · Accepted Answer · 2017-04-25 03:44:47Z

0

you can try remove the width value, specified height value only

<canvas id="updating-chart" height="200"></canvas>

answered Apr 25, 2017 at 3:44

Gusti Arya

1,3113 gold badges16 silver badges32 bronze badges

Collectives™ on Stack Overflow

Cannot change chart.js size

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related