Set fixed height for time-based line chart

This commit is contained in:
Alejandro Celaya 2020-05-30 10:26:52 +02:00
parent 68b0577526
commit a42f5ab13e
2 changed files with 13 additions and 2 deletions

View file

@ -0,0 +1,9 @@
@import '../../utils/base';
.line-chart-card__body canvas {
height: 300px !important;
@media (min-width: $mdMin) {
height: 350px !important;
}
}

View file

@ -14,6 +14,7 @@ import { reverse } from 'ramda';
import moment from 'moment';
import { VisitType } from '../types';
import { fillTheGaps } from '../../utils/helpers/visits';
import './LineCHartCard.scss';
const propTypes = {
title: PropTypes.string,
@ -86,6 +87,7 @@ const LineChartCard = ({ title, visits, highlightedVisits }) => {
].filter(Boolean),
};
const options = {
maintainAspectRatio: false,
legend: { display: false },
scales: {
yAxes: [
@ -115,8 +117,8 @@ const LineChartCard = ({ title, visits, highlightedVisits }) => {
</UncontrolledDropdown>
</div>
</CardHeader>
<CardBody>
<Line data={data} options={options} height={80} />
<CardBody className="line-chart-card__body">
<Line data={data} options={options} />
</CardBody>
</Card>
);