score:1
the official documentation states (link):
points
the coordinates of all the points in the line, usually calculated internally.
format:
[{x: 12, y: 12, value: 240}]
to pass the array you've provided you need to transform the array a bit. you can do this with:
const data = array.map(x => ({pv: x}));
return (
<linechart data={data}>
<line type="monotone" datakey="pv" stroke="#8884d8" />
</linechart>
);
obviously left out a lot of things here, but you can probably leave the coordinates themselves out since you are likely drawing on a cartesian plane. the coordinates will be calculated automatically - just pass the values.
here, the line will select the pv
key from your dataset, and draw them.
snippet derived from: http://recharts.org/en-us/api/linechart
score:1
you need to provide an array of objects as data
const array = [0, 0, 1, 2, 454, 3];
const data = array.map((value,index)=>({index,value}))
and then
<linechart width={600} height={300} data={data}>
<xaxis datakey="index"/>
<yaxis/>
<line datakey="value" stroke="#8884d8" activedot={{r: 8}}/>
</linechart>
demo at https://jsfiddle.net/mxgkwszq/1/
score:3
for anyone who want to use the data array as is, without array map function.
providing a function to datakey
prop is your answer:
const data= [0, 0, 1, 2, 454, 3];
<linechart width={500} height={300} data={data}>
<cartesiangrid strokedasharray="3 3" />
<yaxis datakey={(v) => v} />
<line type="monotone" datakey={v=>v} stroke="#8884d8" />
</linechart>
in case you want to provide more data such as xaxis tick names, tooltip legend, you should use the map function and add other properties.
Source: stackoverflow.com
Related Query
- Recharts - pass array of values to Line component
- Pass value from one component to another values in array ReactJS
- how do i pass array from select html element component to two text components that have different values in the array
- How to pass values from a component into Formik multi-step form wizard?
- How to pass values from on component to Redux form
- Reactjs - How to pass values from child component to grand-parent component?
- Remove Y Axis line but keep the values in recharts
- Pass style array to React Component
- Pass values as parameters state from the component or access the status in the action creator?
- React.js how to pass in index as prop to child component from this.props array
- Pass values from children to parent component
- How to pass an Array from Child component to Parent component in react I know how to pass from parent t
- How do I pass a value from an array defined in state into a component which beholds a component?
- How to pass form values from child component to parent in react
- Pass form input values to another component React
- React functional component - how do I pass refs back to parent when component returns an array of elements?
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- How to pass down props down to a React component having same keys and values
- How to pass fill colors to recharts Pie component
- Pass array to component
- Pass multiple state values to child component in reactjs
- how to pass props into component from route array in react
- How can I pass values from Highcharts event callbacks (click, mouseOver, mouseOut) back to React component member function?
- how to pass values from an array into a prop
- Pass values to another component in React Final Form
- How to map over an array and pass it as props to child component correctly in React?
- React js - Updating state with array values and a line break
- Map through array of objects and pass props to specific component
- imploding array values to attributes of a react component
- Render React component from array values
More Query from same tag
- Make React Material-UI Fab Button to stick to a position on the screen
- How to use Apollo/Graphql hooks within external React.js component library
- How to avoid re-rendering with react-swipe library and useState
- Mention list and emoji top position (Draft.js)
- Get the value by passing key to array of object in react and lodash
- react hooks: patterns when extract hook with callback function parameter
- center items inside the child div html css
- React Styleguidist starting slooooooow
- How can I integrate react-chartjs-2 with chartjs-plugin-datasource to use a datasource at an s3 url
- Formik & yup form validation not working as expected with VirtualizedSelect
- If condition inside of map() React JS
- Casting a radio button with parseInt returns a string
- how to add polygon in bingmaps from localstorage
- how can i set React initialState for image files
- When using a Setter in react how does the callback function argument get named?
- React useState hook - Objects are not valid as a React child
- Where is my unexpected token error occurring?
- Facing error (0 , (_wordwrap || _load_wordwrap(...)).default)(...)(...).trimStart is not a function on expo init
- import React, {PropTypes} from 'react' causing Uncaught TypeError: Super expression must either be null or a function, not undefined
- Portion render when this.state update?
- How to update status of Parent sate using functional component react
- How to Map array by removing duplicates
- How to store Gutenberg ColourPicker RGBA as metadata (React)
- Cannot GET "/About" with react-router v4 (Production Help)
- Storybook 6 - how to set array of objects?
- How does this useState hook work in React?
- Assets destination folder is not set Skipping react native (Images not loading in the APK)
- react-big-calendar ERROR: Invalid prop `slotStart` of type `date` supplied to `Popup`, expected `number`
- Cannot access value of state inside function body that's inside component
- how to use map function with (axios/classhooks) to read from API