demo: https://nivo-test-responsivebar.glitch.me/
code: https://glitch.com/edit/#!/nivo-test-responsivebar?path=client/app.js:18:28
import React from "react";
import axios from "axios";
import { ResponsiveBar as Bar } from "nivo";
export default class App extends React.Component {
constructor() {
super();
this.state = { data: [] };
}
componentDidMount() {
const apiarray = Array(3)
.fill(0)
.map((_, i) =>
axios
.get("https://swapi.co/api/species/?format=json&page=" + (i + 1))
.then(x => x.data.results)
);
console.log("apiarray", apiarray);
Promise.all(apiarray).then(resultarr => {
const x = [].concat.apply([], resultarr);
const parseddata = x
.filter(x => x.average_lifespan !== "unknown")
.map(({ name, average_lifespan }) => ({
name,
average_lifespan: Number(average_lifespan)
}));
console.log("flattened results", parseddata);
this.setState({ data: parseddata });
});
}
render() {
return (
<div style={{ height: "480px", width: "600px" }}>
{JSON.stringify(this.state.data)}
{this.state.data.length && (
<Bar
data={this.state.data}
keys={["average_lifespan"]}
indexBy="name"
axisBottom={{
orient: "bottom",
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "name",
legendPosition: "center",
legendOffset: 36
}}
axisLeft={{
orient: "left",
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "average_lifespan",
legendPosition: "center",
legendOffset: -40
}}
/>
)}
</div>
);
}
}
this axisBottom and axisLeft code is copied straight from the docs. why doesnt it show up in the chart? there arent any errors about unrecognized fields so i don't know how to proceed. please help! thank you!
demo: https://nivo-test-responsivebar.glitch.me/
code: https://glitch.com/edit/#!/nivo-test-responsivebar?path=client/app.js:18:28
this axisBottom and axisLeft code is copied straight from the docs. why doesnt it show up in the chart? there arent any errors about unrecognized fields so i don't know how to proceed. please help! thank you!