Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js not height responsive

I have issues to get the chart.js line chart to be responsive on the height as well as the width.

See example what it should be working like:

  • http://www.chartjs.org/samples/latest/charts/line/basic.html

Here is my code:

  var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  var lineChartData = {
    labels : ['January','February','March','April','May','June','July'],
    datasets : [
      {
        label: 'My First dataset',
        labelColor : '#fff',
        fontColor : '#fff' ,
        backgroundColor : 'rgba(220,220,220,0.2)',
        borderColor : 'rgba(220,220,220,1)',
        pointBackgroundColor : 'rgba(220,220,220,1)',
        pointBorderColor : '#fff',
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
      }
    ]
  }

  var options = {
    maintainAspectRatio: false,
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        gridLines: {
         display: false,
         color: '#03A5C5',
         lineWidth: 8,
         },
        ticks: {
          fontColor: "white",
        },
      }],
      yAxes: [{
        gridLines: {
         display: false,
         color: '#03A5C5',
         lineWidth: 8,
         },
        ticks: {
          fontColor: "white",
          beginAtZero: true,
        }
      }]
    }
  };
  var ctx = document.getElementById('canvas-1');
  var chart = new Chart(ctx, {
    responsive: true,
    type: 'line',
    data: lineChartData,
    options: options
  });
like image 636
Kévin Brun Avatar asked Aug 03 '17 13:08

Kévin Brun


People also ask

What is responsive in chart JS?

Chart.js provides a few options to enable responsiveness and control the resize behavior of charts by detecting when the canvas display size changes and update the render size accordingly.

How do I make a line chart responsive?

To make chart responsive just set responsive key to true inside lineChartOptions. Also, remember to remove :width and :height properties from the element and make the wrapper element responsive via css/scss.

How do I set the size of a Chartjs?

To set the chart size in ChartJS, we recommend using the responsive option, which makes the Chart fill its container. You must wrap the chart canvas tag in a div in order for responsive to take effect. You cannot set the canvas element size directly with responsive .


1 Answers

  1. Create Class
.chart-container {
    position: relative;
    margin: auto;
    height: 80vh;
    width: 80vw;
}
  1. Create Div With class chart-container and place canvas tag inside it.
<div class="chart-container">
  <canvas id="canvas"></canvas>
</div>
  1. Chart options, use property maintainAspectRatio set to false:
options: {
    maintainAspectRatio: false,
    responsive: true,  
    ...
}
like image 196
Pravin Pagare Avatar answered Sep 19 '22 14:09

Pravin Pagare