/*
Style sheet for responsive charts
Works with cdn.jsdelivr.net/npm/chart.js
*/
.chart-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 400px; /* base height */
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important; /* force canvas to fill container height */
  display: block; /* removes inline gap */
}

/* As screen narrows, increase height */
@media (max-width: 900px) {
  .chart-container {
    height: 500px;
  }
}

@media (max-width: 600px) {
  .chart-container {
    height: 600px;
  }
}

@media (max-width: 400px) {
  .chart-container {
    height: 700px;
  }
}