Comments (7)
Currently, the both contexts (React component and chart) in chart functions can be accessed by binding the right this
, for example:
constructor(props) {
this.state = {
options: {
chart: {
events: {
render: function() {
const chart = this.chart;
const component = this;
...
}.bind(this)
}
},
...
}
};
}
chartCallback(chart){
this.chart = chart;
}
render() {
return (
<HighchartsReact
highcharts={Highcharts}
options={this.state.options}
callback={ this.chartCallback.bind(this) }
/>
)
}
Live demo: https://stackblitz.com/edit/react-e7gcju?file=index.js
from highcharts-react.
You could access chart
instance through context of chart's load event
to call showLoading()
and hideLoading()
on it.
from highcharts-react.
@KacperMadej How do I access react context within this events? For example to check if this.props.loading
is true?
events: {
render() {
if (this.props.loading) { // How?
this.showLoading();
} else {
this.hideLoading();
}
},
},
from highcharts-react.
Have you tried fat arrow function? But then this
will not be the chart, so you need to choose, or use a different event to store chart reference in react context.
from highcharts-react.
I tried a lot of things, including arrow function, but with no success. This problem unfortunately applies to any function I would like to use within Highchart context.
I think the right way to do it would be if Chart is just a parameter of the callback function, instead of providing it via this context.
events: {
render: (chart) => {
if (this.props.loading) {
chart.showLoading();
} else {
chart.hideLoading();
}
},
},
from highcharts-react.
That's gonna break backward compatibility (events.render
is a callback directly from Highcharts core), confusing much more users than react users. Probably this wrapper could take care of it, but why don't we simply..
Define:
var propLoading = this.props.loading;
Then use it:
events: {
render: () {
if (propLoading) {
this.showLoading();
} else {
this.hideLoading();
}
},
},
Internal note:
In general, if we decide to replace context in render
, then we should replace context for all callbacks to keep them consistent.
from highcharts-react.
In general, if we decide to replace context in render, then we should replace context for all callbacks to keep them consistent.
Please, it would make so much sense!
from highcharts-react.
Related Issues (20)
- Tooltip is going under axis-component HOT 8
- Chart values and options doesn't trigger re-render HOT 2
- Zones rendering issue after updating to [email protected] HOT 5
- Issue whille integrating packedbubble in react-highcharts HOT 15
- TypeError: Cannot read properties of undefined (reading 'length') HOT 1
- Plotbands added via API are not added to plotOptions HOT 2
- Next.js 14.1.0 Cannot read properties of undefined (reading 'document') HOT 2
- Add a react ref to each point HOT 4
- chart.update() refression with yAxis behavior HOT 23
- Unexpected series order when adding linkedTo series HOT 2
- Cannot read properties of undefined (reading 'forEach') HOT 3
- Server side rendering of React components HOT 1
- Issue with borderRadius object HOT 1
- i am unable to draw a Polar (Radar) chart HOT 2
- Is this the correct way to use the Boost module to improve performance? HOT 3
- Updating a column chart's series data with dataSorting: enabled causes a crash HOT 2
- Bar Chart Rendering is different if I use boost HOT 2
- Leaving the page with a highstock chart in it throws multiple console errors despite chart doing its job HOT 3
- Issue: Component Getting Unmounted from DOM When Using Scroll HOT 4
- Issue: Inconsistent Space Between Axis and Scroll Bar When Scrolling and Zooming in Chart HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from highcharts-react.