score:0
Accepted answer
highcharts for performance uses the reference to the original data array. in your code, you edit the second level of the data: lastcolumn.value[1] += 100;
which causes that there are no changes in the options during update.
this example presents similar situation: http://jsfiddle.net/blacklabel/tf1csqeo/
the solution is to clone your data before modifying it:
handleclick = () => {
let newdata = this.state.data.map(x => x.slice());
if (newdata[newdata.length - 1][1] < 450) {
newdata[newdata.length-1][1] += 100;
this.setstate(
{
data: newdata
}
);
}
};
live demo: https://codesandbox.io/s/6xv0kr3v0n
as you can see, the animation works correctly.
Source: stackoverflow.com
Related Query
- Highcharts React update animations with datetime axis
- How to update Highcharts with React JS via input fields
- Highcharts Y Axis overlay while re-rendering with React
- React input defaultValue doesn't update with state
- Why React useState with functional update form is needed?
- React hooks: How do I update state on a nested object with useState()?
- React efficiently update object in array with useState hook
- How do you update Formik initial values with the react context api values after an AJAX request?
- What's the best alternative to update nested React state property with setState()?
- React Datetime Picker Component with Semantic UI React example
- Form created with React doesn't update the backing state object
- Dynamically update Highcharts chart in react
- GitHub Pages not able to update index.html meta tags with create react app(CRA)
- Any react-quill fix or update to work with React 17?
- Over the air update with React Native
- What is the 'proper' way to update a react component after an interval with hooks?
- How to test redux state update with react testing library and jest
- Update scrollview when keyboard is open with React Native
- How to update state that has dependency on other state with React Hooks
- 3D Animations on View with React Native
- How to prevent component re-render (update) inside animations with REACT
- How to update an array at a particular index with React js
- react update component margin-top with jQuery
- React State update a nested array with objects based on the id when iterated
- How to update with React Hooks specific value of an array inside an object?
- Why won't my controlled Input component in React update with the state?
- Update Google Map based on Geolocation with React
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- Can't perform a React state update on an unmounted component with fetch POST method
- React js useState hook. How to update state of a json object with an a array in it when a checkbox is clicked
More Query from same tag
- How to customize bootstrap 4 in reactjs app with reactstrap dependency?
- How to implement React in a jQuery-based webapp?
- Bootstrap 4 card usage with responsive next/image
- React + Meteor: this.props is returning undefined
- using ref.current in React.forwardRef
- nodemailer is not sending emails if the website is not running
- How to solve Property does not exist in type 'never'
- how to sort the time and display the messages in a correct order
- React : statusCode: 400, name: "Error", message: "The limit parameter "undefined" is not valid
- In react when state changes, are useState and useEffect also updated?
- Error on starting ASP.NET Core React web applicaton on Debian 8.10
- React event currentTarget textContent showing all values
- react-native firebase fetch() operation cannot be completed successfully ,due to throttling
- How to call two onClick events from different places
- React Hook useEffect has a missing dependency: 'fetchComments'. Either include it or remove the dependency array
- Reactjs, Generate JSX element from array using map
- scss file does not contain a default export (Gatsby and Sass)
- Wepack error : Adjacent JSX elements must be wrapped in an enclosing tag
- react-hook-form undo the form to previous state
- pass props to child component on click
- How to detect certain scroll position with framer-motion?
- Reading environment variable in run time after running npm build for a create-react-app based project
- "Unresolved variable" when using className={styles.nameOfClass}
- React prevent middle click from scrolling
- Using multiple react router switch throws 404 error
- How to use select option in react js?
- React: Custom component not representing the right data
- React&Redux: I have State in the background, but can't render the looped-through Array in my JSX
- Where does FilledInput inherit backgroundColor property in Mui?
- React component not rendered when sub path is called directly