score:1
the error given by the highchart
library means that it could not find the div with the id
you provided. it would seem that componentwillreceiveprops
is called before render.
i would recommend you call your highchartfunction
inside the componentdidmount
lifecycle method and save the chart
instance to a class property to access it later. componentdidmount
is called right after first call to render
, so the element should be created at this point.
componentdidmount() {
this.highchartfunction();
}
highchartfunction () {
const { title, subtitle, id, data, categories, graphdata } = this.props;
this.chart = highcharts.chart(string(id), {
//... options
});
}
if you want to handle updates to the props i would recommend using componentdidupdate
, as componentwillreceiveprops
is marked for deprecation and is planned to be removed in react 17. also there seemed to be some bugs with it. componentdidupdate
gets the previous props
as an argument so you can check if a update is needed:
componentdidupdate(prevprops) {
if ("somehow prevprops and this.props is different") { // replace with check
this.chart.update({
// new options
}, /* here is an argument to set if the chart should be rerendered, you can set it if necessary */);
}
}
also donĀ“t forget to set the componentwillunmount
lifecycle method to destroy the chart:
componentwillunmount() {
this.chart.destroy();
}
personal recommendation: i would not use the id
to set the chart, but instead use refs. those are references to the component which is in my opinion much better than an id
lookup.
constructor() {
this.chartcontainer = react.createref();
}
highchartfunction() {
/* ... */
highcharts.chart(this.chartcontainer.current, { ... });
}
render() {
const { id } = this.props;
return (<div key={id} id={id} ref={this.chartcontainer} />)
}
here is a minimal example with all i have mentioned here.
Source: stackoverflow.com
Related Query
- Dynamically high chart rendering not working
- High Chart Data label Formatter not working properly
- tickinterval not working high chart for x axis
- my highchart is currently is not working with pie spline chart in updating after rendering chart
- High chart export not working in android webview
- High chart formatter not working on Highchart API
- High Chart Legends rotation not working on IE 10,11 when select document mode 8
- Dynamic high chart not rendering in MVC C#
- High chart background and other components are not working as usual
- zip two arrays in javascript not working to draw high chart
- Dynamically changing Highcharts Theme through Jquery code not working
- High charts Donut Chart not rendering
- HighCharts.js is not rendering chart under IE8
- x-axis tickInterval not working correctly in highstock chart
- Not rendering VU-meter Gauge chart using HighCharts in Durandal
- JavaScript code inside TypeScript file .ts not working
- using angular directive to draw highchart pie chart but when i am using it in success function it is not working
- Highcharts.js variable pie chart not rendering data correctly along percentage dataLabels
- Dynamic chart is not working properly (highcharts)?
- Pie chart with drilldown not working
- Highcharts Bar Chart Zoom not working
- High Charts not working
- c# WPF Webbrowser with Highchart, Javascript from external source not working "An error has occurred in the script on this page"
- HighCharts pointPlacement option not working in a single column chart
- In highcharts,tool-tip does not move when chart has high data unlike when it has low data
- Custom gauge chart not working when resize
- High chart not showing accurate percentage for two curves?
- High charts draggable not working for log scale
- Angular Highcharts hideNoData not working dynamically
- High chart data downloads but does not display in browser using node
More Query from same tag
- Building dynamic number of arrays to display in Highchart
- Highchart: Making a single series scrollable and changing x-axis variable upon drilldown
- Highchart: Custom Fixed Placement chart
- highcharts scatter with 4 quadrants
- Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue
- How to assign .POST return value to a variable
- hierarchy information while using grouped category plugin in highchart
- Align DataLabels of Solidguage in Highcharts
- Use image in Highcharts credits
- Is highcharts-more still needed (as of highcharts version 4.0.4)?
- fixing label overlapping in second level of grouped categories plugin used in highchart
- Highcharts Chart is not completely hidden if the smartGWT Layout id hidden
- exporting highcharts polar chart to PDF with phantomjs
- Changing point className in Highcharts Gantt
- How to load the highchart in my aspx page
- convert string into array for highcharts js
- How to change the marker style on hover in HighCharts
- First tick on min and last tick on max
- How to change highmap bubble color
- Highcharts - xAxis label for each point
- Highstock + Highmaps not rendering
- multiple charts using highcharts
- Highcharts with boost not rendering correctly at small intervals
- Highcharts Gauge not showing in Angular
- negative values missing in logarithmic mode
- How to load highcharts annotations module in angular module app.module.ts?
- Highstock: xy zooming with panning
- Is it possible to use null datapoints with a datetime x-axis?
- How to display 2 solid gauge using ng-repeat function?
- x-Values Data not showing in Highcharts, Javascript