CODEWITHSUNDEEP
chart.js
Victor
Victor

Reputation: 61

responsive = false not working

I'm trying to display a couple of charts but am having two main that I could use some help with. The first, responsive = false doesn't seem to be working because whenever I load the chart it makes the charts bigger, and the second is that my hover tool-tips can't seem to work.

Here is what my chart code looks like:

var ctx = document.getElementById("myChart").getContext("2d"); //this.$refs.canvas

var myChart = new Chart(ctx, {
   type: 'pie',
   data: {
      labels: ["Checked", "Un-Checked"],
      datasets: [{
         label: '# of Hits',
         data: [1000, 500],
         backgroundColor: [
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)'
         ],
         borderColor: [
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)'
         ],
         borderWidth: 1
      }]
   },
   options: {

      responsive: false

   }
});

Upvotes: 4

Views: 5255

Answers (2)

Dinesh K
Dinesh K

Reputation: 651

Detecting when the canvas size changes can not be done directly from the CANVAS element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size

Source :http://www.chartjs.org/docs/latest/general/responsive.html

Upvotes: 0

Martins
Martins

Reputation: 508

Give myChart a fixed width, like:

<div id="myChart" style="width:200px;"></div>

It works for me.

Upvotes: 3

Related Questions