score:11
Accepted answer
so, i have found a workaround. it is working perfectly. i am getting the chart by ref
and then set a new data using setdata
. this only updates the data rather than re-rendering the whole chart component. and i am using component lifecycle method shouldcomponentupdate
to stop the re-rendering of the component. here is the related code:
class contributionriskgraph extends react.purecomponent {
constructor() {
super();
this.state = {
riskvalue: 8.161736
};
this.handlechange = this.handlechange.bind(this);
}
shouldcomponentupdate(nextprops, nextstate) {
if(this.state.riskvalue !== nextstate.riskvalue) {
return false;
}
}
handlechange(value) {
this.setstate({
riskvalue: value
});
let riskvalue = this.state.riskvalue / 100;
let chart = this.crg.getchart();
chart.series[0].setdata(getgraphplotdata(riskvalue, 'lowerbound'), true);
chart.series[1].setdata(getgraphplotdata(riskvalue, 'expectedvalue'), true);
chart.series[2].setdata(getgraphplotdata(riskvalue, 'upperbound'), true);
}
render() {
// other code
return(
<div>
<reacthighcharts config={config} ref={a => this.crg = a} />
<div style={{ display: 'flex', justifycontent: 'center', margintop: 30 }}>
<rangeslider
label="risk value"
defaultvalue={8}
min={1}
max={62}
handlechange={this.handlechange}
/>
</div>
</div>
)
}
}
Source: stackoverflow.com
Related Query
- Change series data dynamically in react-highcharts without re-render of the chart
- React doesn't render without Reloading the page on URL Change
- In React How can I fetch data and render a single object in a states array without mapping the whole thing?
- How to change the chart title dynamically on tooltip hover in the points Highcharts.. React JS
- Webpack & React - Change data of json file without the need to rebuild
- How to change dynamically the render of icons inside a table based on a type of the data coming
- How to fetch the new data in response to React Router change with Redux?
- How to get the data from React Context Consumer outside the render
- Dynamically update Highcharts chart in react
- Laravel 5.5 render a React component in a blade view with data from the controller
- Change the children of a component dynamically in React
- Change state dynamically based on the external Internet connectivity - React (offline/online)
- Why is my React component render called twice, once without data and then later with data, but too late exception?
- How do I dynamically change the content of a React Bootstrap modal?
- How to change the Swiper height or slide width in React JS without using fixed CSS
- How to dynamically change the title of a website in react js (also in source code)?
- Scroll to bottom of the page when data added in body dynamically in react js?
- Gauge Series of Highcharts with React not the Solid Gauge but Gauge Series
- The socket.io connection returns an empty array. Ways to receive data in React without reloading the page?
- Dynamically create checkboxes and add change handlers for the same : Semantic-ui-react + React
- Maintain the context data for each child component on React router change
- I am not able to render the data in react
- How do I re render the entire React Pivot Table UI component when I change the selection in select tag?
- How to not change the state at the first render of React component?
- how to change the style of only one react component that is being render through .map() when the component is clicked
- Download chart as PNG format in React without overwriting the DOM
- How to change the color of highcharts series graph to black & white during downloading it as an image?
- How can I render a Material UI grid using React without the unique key warning
- how to change the background color of a button without affecting the other buttons in React JS
- React js - Dynamically Change the style Maxheight of element based on dynamic content
More Query from same tag
- value of state increment twice in reducer.js file
- Simple React with mySql fails to read table records
- How do I make the DATETIME show as required as it is different from mySQL and from api endpoint?
- Finding React Components nested inside html elements
- TypeError: Cannot read property 'state' of undefined. Updated React
- Counting duplicates in object array and storing the count as a new object have error !!! react js
- How to update a field value after action dispatched with redux
- TypeError: this.state is null for $.ajax request
- When selecting an option in a dropdown, how do I change the state with onChange but with a value other than the one inside the option tags
- StripeCheckout - How to pass Additional data to handleToken function?
- Why doesn't a variable increment in my React component as expected?
- How to manipulate inside of a component in React?
- React - API call with Axios, how to bind an onClick event with an API Call
- How to use dynamic meta tags in react single page application?
- Pass Images url using props
- StencilJS, how to read/get all the declared props in a class through React ref of the relative rendered component?
- React problem Cannot read properties of undefined (reading 'map') in a quiz app?
- got Can't resolve 'react/jsx-runtime' error while use try to create the shared component with storybook in react-typescript
- Best way to get values from multiple complex child components?
- Not getting object in componentDidMount while trying to setState
- Why I always get a Promise form my return value?
- How do you pass arguments to createAsyncThunk in redux toolkit?
- What is the relationship between DOM nodes and the javascript namespace?
- How can I avoid unnecessary rerenders when storing complex state in Apollo reactive variables?
- facing fs-extra, html-webpack-plugin-before-html-processing, graceful-js issues when starting react app
- React-intl for non components
- Unable to update json property using spread operator within this.setState() - React.js
- React/Express Fetch Request Not Displaying Array of Json Objects
- How to pass state between all child components after user authorization?
- ReactJS: How to redirect from one route to another in react-router after XHR?