.chart-container {
  position: relative;
  width: 100%;
  overflow-x: auto;
  margin: 0 auto;
}

#budgetChart, #barChart {
  width: 100%;
  height: 400px;
}

@media (max-width: 768px) {
  #budgetChart, #barChart {
    height: 300px;
  }
}

#incomeChart {
  max-width: 100%;
  height: 400px;
}

#expenditureChart {
  max-width: 100%;
  height: 400px;
}

@media (max-width: 576px) {
  #incomeChart {
    height: 300px;
  }

  #expenditureChart {
    height: 500px;
  }
}