Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

responsive = false not working

Tags:

chart.js

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

   }
});
like image 291
Victor Avatar asked Sep 03 '25 17:09

Victor


1 Answers

Give myChart a fixed width, like:

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

It works for me.

like image 127
Martins Avatar answered Sep 07 '25 18:09

Martins