Why is react-sparklines chart rendered differently on firefox than on chrome? - css

Question

I am using react-sparklines to draw charts for 5 day weather data for a given city.
This is my React container (not yet complete) that displays the weather data for each city the user searches for -
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Sparklines, SparklinesLine } from 'react-sparklines';
class WeatherList extends Component {
constructor(props) {
super(props);
this.renderWeather = this.renderWeather.bind(this);
}
renderWeather(cityData) {
const name = cityData.city.name;
const temps = cityData.list.map(w => w.main.temp);
console.log(temps);
return (
<tr key={name}>
<td>{name}</td>
<td>
<Sparklines height={40} width={80} data={temps}>
<SparklinesLine color="red" />
</Sparklines>
</td>
</tr>
)
}
render() {
return (
<table className="table table-hover">
<thead>
<tr>
<th>City</th>
<th>Temperature</th>
<th>Pressure</th>
<th>Humidity</th>
</tr>
</thead>
<tbody>
{this.props.weather.map(this.renderWeather)}
</tbody>
</table>
)
}
}
function mapStateToProps(state) {
return {weather: state.weather};
}
export default connect(mapStateToProps, null)(WeatherList);
And, I've given specific measuresments that state the width and height for each sparkline chart -
<Sparklines height={40} width={80} data={temps}>
However, while the measurements seem right when it it is rendered on chrome, the chart is completely out of proportion on Firefox. Here are the screenshots -
The top one is chrome, Firefox is below -
Next, I inspected the sparkline chart with React Dev Tools on both Firefox and Chrome. Here are the results:
Firefox -
Chrome-
The project uses only Bootstrap, and no other CSS. For this particular table, only table and table-hover classes are used. So, why is the chart rendered differently on Firefox than on Chrome, even when the width and height is constant across both? How can I fix it?

Answer 1

This looks like Stephen Grider's course on React, which is extremely excellent and I recommend you do all especially the GraphQL and JWT auth ones.
There is a minor issue in that one where his project shows correct and yours will probably have one that is incorrect sizing. Later in the video series, he introduces some CSS that fixes it.
If I recall correctly, it is some CSS on the SVG graphic that gives it proper styling. I played with Sparklines after, and I noticed it has a tendency to bleed with what I might call some eratic sizing, so I suspect it is a matter of getting the CSS correct.
I'm looking at my project now, try putting this in the CSS:
svg {
height: 150px;
}