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