I am using victory native chart to render area chart and i dont know how to fetch data from api to the chart, meaning x will hold "usia" and y will hold "indeks_massa". anyone good people can help me to solve this? :(
this is my code:
const data = listHistory.map((usia, indeks_massa) => {
return { x: usia, y: indeks_massa }
})
<VictoryLine style={{ data: { stroke: "blue" }, }}
data={data}
/>
Well, you'll need to get the data, set state with it, and update the component with some additional information - at least based on their documentation. If you need to manipulate the data you can do that before you add it to state.
const { useEffect, useState } = React;
// Transforms the data
function mappedData(data) {
return data.map((el, index) => {
return { x: el, y: index };
});
}
function Example() {
const [ data, setData ] = useState([]);
// Run `getData` once (the empty dependency array
// `[]` ensures that). `getData` fetches the JSON,
// and parses it, and then `setData` adds the (now
// transformed data to state.
useEffect(() => {
async function getData() {
const response = await fetch(<endpoint>);
const data = await response.json();
setData(mappedData(data));
}
getData();
}, []);
return (
<VictoryBar
data={data}
x="x"
y="x"
/>
);
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>