score:1

Accepted answer

you could add maintainaspectratio: false to the chart options, and set a min-height on the chart element.

var ctx = document.getelementbyid("mychart");

var data = {
  labels: ["2017-09-26t00:00:00z", "2017-09-27t00:00:00z", "2017-09-28t00:00:00z", "2017-09-29t00:00:00z", "2017-09-30t00:00:00z", "2017-10-01t00:00:00z", "2017-10-02t00:00:00z"],
  datasets: [{
    label: "self rating",
    backgroundcolor: '#777777',
    bordercolor: '#777777',
    data: [1, 2, 0, 0, 0, 0, 0],
    fill: false,
    yaxisid: "y-axis-1",
  }]
};

var mychart = new chart(ctx, {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    maintainaspectratio: false,
    legend: {
      position: 'bottom',
    },
    title: {
      display: true,
      text: 'check-in history',
    },
    scales: {
      // need to limit tick marks to be days
      xaxes: [{
        display: true,
        type: 'time',
        time: {
          unit: 'day',
          unitstepsize: 1,
          displayformats: {
            'day': 'mmm dd'
          }
        }
      }],
      yaxes: [{
        id: "y-axis-1",
        display: true,
        position: "left",
        scalelabel: {
          display: true,
          labelstring: 'mental health continuum'
        },
        ticks: {
          min: 0,
          max: 3.05,
          stepsize: 1,
          suggestedmin: 0,
          suggestedmax: 3.05,
          callback: function(label, index, labels) {
            switch (label) {
              case 0:
                return 'ill';
              case 1:
                return 'injured';
              case 2:
                return 'reacting';
              case 3:
                return 'healthy';
            }
          }
        },
        gridlines: {
          display: false
        }
      }]
    }
  }
});
#mychart {
  min-height: 350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.0/chart.min.js"></script>

<div id="wrapper">
  <canvas id="mychart"></canvas>
</div>


Related Query

More Query from same tag