I have a website that is using the reactjs react-timeseries-charts component for displaying graphs.
For some reason, when using any other browser besides safari, it works as intended with no errors. When i try and open with Safari, the bar charts and line graphs come up blank and through an error in react-dom.development.js saying "unable to parse: d=12345NaN, 45678NaN". I don't quite understand how to troubleshoot errors logged in react-dom.development.js. Clearly the "NaNs" are the problem, but I dont know where they are coming from. When I examine the DOM elements, on Safari, the tag has x="NaN" that is not present in chrome, so the actual width of the bars is not being properly set. The X-axis is also not rendering.
[Chrome][1] [1]: .png
Here is the relevant snippet from render():
render(){
return(<div className="chart" id="chart" onTouchMove={this.handleTouchMove} onTouchStart={this.handleTouchStart} onTouchEnd={this.handleTouchEnd}>
<ChartContainer
timeRange={this.state.timerange}
width={this.state.width}
utc={true}
format={this.formatTime}
onBackgroundClick={() => this.setState({ selection: null })}
onTimeRangeChanged={this.handleTimeRangeChange}
timeAxisAngledLabels={false}
timeAxisTickCount={this.state.tickCount}
enablePanZoom={true}
minDuration={this.state.minDuration}
minTime={this.state.window_min}
maxTime={this.state.window_max}
paddingTop={this.state.paddingTop}
paddingLeft={this.state.paddingLeft}
paddingBottom={this.state.paddingBottom}
paddingRight={this.state.paddingRight}
timeAxisStyle={{
ticks: {
stroke: "#000000",
opacity: 1
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
axis: {
stroke: "#000000"
}
}}
>
<ChartRow height={this.state.height}>
<YAxis
id="axis"
label=""
min={0}
max={this.state.y_max > this.state.rate ? this.state.y_max : (this.state.rate*1.1)}
width="80" //changed
type="linear"
labelOffset={2}
style={{
label: {
fill:"#000000"
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
ticks: {
opacity: 1,
stroke:"#000000"
},
axis: {
stroke: "#000000"
}
}}
format={function (n){ return Number(n).toFixed(1)}}
/>
<Charts>
<BarChart
axis="axis"
style={column_style}
spacing={this.state.spacing}
columns={this.state.active_columns}
offset={3}
series={this.state.Series}
infoTimeFormat={(index) =>
(<tspan style={{ fill: "black", fontSize: "0.8rem", fontWeight: "bold" }}>Hour: {moment(index.begin()).utc().format("HHmm")}</tspan>)} //Info box time display and format
info={infoValues} //Info box on hover
infoWidth={130}
infoHeight={40}
infoStyle={{
label: {
fill: "#000000",
"font-size": "0.8rem",
},
values: {
fill: "#000000"
},
box: {
stroke: "#000000",
opacity: 0.4,
}
}}
infoOffsetY={150} //Info box stem height
stemStyle={{
stroke: "#000000",
cursor: "crosshair"
}}
markerStyle={{ fill: "#000000" }}
highlighted={ this.state.highlight }
onHighlightChange={highlight => this.setState({ highlight })}
/>
</Charts>
</ChartRow>
</ChartContainer>
</div>);
}
Here is the relevant function for setting the timeseries:
let points = [];
let one = 0, two = 0, three = 0, four = 0;
for(let i in data){
if(some condition){
one++;
}else if (some other condition){
two++;
}else if (some other condition){
three++;
}else{
four++;
}
}
points.push({
"index": time,
"one": one,
"two": two,
"three": three,
"four": four
});
for (let i in data) {
const d = new Date(data[i].index);
const index = Index.getIndexString(interval, d);
points.push([index, data[i].one, data[i].two, data[i].three, data[i].four]);
if (points.length > 0) {
const series = new TimeSeries({
name: "BarChart",
columns: ["index", "one", "two", "three", "four"],
points: points
});
I made some changes to mask the nature of the code and what it is for, so there may be some typos with regards to that.
I do know that react-timeseries-charts is throwing errors for NaN height and y values when the data points contains a value of 0 for one of the four values (one, two, three, four), but it still renders in chrome.
Any help would be appreciated.
I have a website that is using the reactjs react-timeseries-charts component for displaying graphs.
For some reason, when using any other browser besides safari, it works as intended with no errors. When i try and open with Safari, the bar charts and line graphs come up blank and through an error in react-dom.development.js saying "unable to parse: d=12345NaN, 45678NaN". I don't quite understand how to troubleshoot errors logged in react-dom.development.js. Clearly the "NaNs" are the problem, but I dont know where they are coming from. When I examine the DOM elements, on Safari, the tag has x="NaN" that is not present in chrome, so the actual width of the bars is not being properly set. The X-axis is also not rendering.
[Chrome][1] [1]: https://i.sstatic/MB3Q6NAp.png
Here is the relevant snippet from render():
render(){
return(<div className="chart" id="chart" onTouchMove={this.handleTouchMove} onTouchStart={this.handleTouchStart} onTouchEnd={this.handleTouchEnd}>
<ChartContainer
timeRange={this.state.timerange}
width={this.state.width}
utc={true}
format={this.formatTime}
onBackgroundClick={() => this.setState({ selection: null })}
onTimeRangeChanged={this.handleTimeRangeChange}
timeAxisAngledLabels={false}
timeAxisTickCount={this.state.tickCount}
enablePanZoom={true}
minDuration={this.state.minDuration}
minTime={this.state.window_min}
maxTime={this.state.window_max}
paddingTop={this.state.paddingTop}
paddingLeft={this.state.paddingLeft}
paddingBottom={this.state.paddingBottom}
paddingRight={this.state.paddingRight}
timeAxisStyle={{
ticks: {
stroke: "#000000",
opacity: 1
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
axis: {
stroke: "#000000"
}
}}
>
<ChartRow height={this.state.height}>
<YAxis
id="axis"
label=""
min={0}
max={this.state.y_max > this.state.rate ? this.state.y_max : (this.state.rate*1.1)}
width="80" //changed
type="linear"
labelOffset={2}
style={{
label: {
fill:"#000000"
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
ticks: {
opacity: 1,
stroke:"#000000"
},
axis: {
stroke: "#000000"
}
}}
format={function (n){ return Number(n).toFixed(1)}}
/>
<Charts>
<BarChart
axis="axis"
style={column_style}
spacing={this.state.spacing}
columns={this.state.active_columns}
offset={3}
series={this.state.Series}
infoTimeFormat={(index) =>
(<tspan style={{ fill: "black", fontSize: "0.8rem", fontWeight: "bold" }}>Hour: {moment(index.begin()).utc().format("HHmm")}</tspan>)} //Info box time display and format
info={infoValues} //Info box on hover
infoWidth={130}
infoHeight={40}
infoStyle={{
label: {
fill: "#000000",
"font-size": "0.8rem",
},
values: {
fill: "#000000"
},
box: {
stroke: "#000000",
opacity: 0.4,
}
}}
infoOffsetY={150} //Info box stem height
stemStyle={{
stroke: "#000000",
cursor: "crosshair"
}}
markerStyle={{ fill: "#000000" }}
highlighted={ this.state.highlight }
onHighlightChange={highlight => this.setState({ highlight })}
/>
</Charts>
</ChartRow>
</ChartContainer>
</div>);
}
Here is the relevant function for setting the timeseries:
let points = [];
let one = 0, two = 0, three = 0, four = 0;
for(let i in data){
if(some condition){
one++;
}else if (some other condition){
two++;
}else if (some other condition){
three++;
}else{
four++;
}
}
points.push({
"index": time,
"one": one,
"two": two,
"three": three,
"four": four
});
for (let i in data) {
const d = new Date(data[i].index);
const index = Index.getIndexString(interval, d);
points.push([index, data[i].one, data[i].two, data[i].three, data[i].four]);
if (points.length > 0) {
const series = new TimeSeries({
name: "BarChart",
columns: ["index", "one", "two", "three", "four"],
points: points
});
I made some changes to mask the nature of the code and what it is for, so there may be some typos with regards to that.
I do know that react-timeseries-charts is throwing errors for NaN height and y values when the data points contains a value of 0 for one of the four values (one, two, three, four), but it still renders in chrome.
Any help would be appreciated.
Share Improve this question asked Nov 19, 2024 at 17:57 squidmonkeysquidmonkey 197 bronze badges1 Answer
Reset to default 0Closing this. the documentation says react-timeseries-charts does not support safari.
Ended up migrating to ChartJS instead.