Highchart is not updating on series state change











up vote
0
down vote

favorite












I am setting my series like below.



   import React, { Component } from "react";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import "../../../../resources/js/motion";
import HC_more from "highcharts/highcharts-more"; //module

import * as Services from '../../services/dashboardservices';
import ProcessData from './bubbleChartMethods';

require("highcharts/modules/map")(Highcharts);
HC_more(Highcharts); //init module

class BubbleContainer extends Component {

style = {
fontFamily: "'univers', Arial, sans-serif",
fontSize: 14,
color: "#333333"
};

state = {
options: {
chart: {
height: 380,
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
resetZoomButton: {
theme: {
states: {
hover: {
fill: '#D98C14',
stroke: '#BF7400',
}
}
}
}
},
credits: {
enabled: false
},

title: "",

legend: {
enabled: false
},

xAxis: {
gridLineWidth: 1,
title: {
text: 'Peak Load (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.05,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
style: this.style,
text: 'Peak Load Threshold',
align: 'center',
verticalAlign: 'middle'
},
zIndex: 3,
value: 30
}],
softMax: 0
},

yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Peak Unbalance (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.1,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
align: 'center',
style: this.style,
text: 'Peak Unbalance Threshold'
},
zIndex: 3,
value: 4
}],
softMax: 0
},
tooltip: {
useHTML: true,
padding: 2,
headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Load: </td><td>{point.x} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Unbalance: </td><td>{point.y} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.z}</td></tr>',
footerFormat: '</table></div>'
},

plotOptions: {
bubble: {
minSize: 20
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '..',
style: { fontSize: 10, color: 'rgba(67, 67, 72, 0.5)', textOutline: false, fillOpacity: 0.1 },
color: 'rgba(67, 67, 72, 0.5)'
},
cursor: 'pointer',
point: {
events: {
click: function () {
// $rootScope.$broadcast('loadHierarchy', { chartType: 'loadUnbalance', name: this.name });
}
}
}
}
},
motion: {
enabled: true,
axisLabel: 'year',
loop: false,
series: 0, // The series which holds points to update
updateInterval: 100,
magnet: {
round: 'round', // ceil / floor / round
step: 0.1
},
labels:
},
series: [{
name: 'Things',
colorByPoint: true,
id: 'deep',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)']
]
}
},
data:
}]
}
}
// Render app with demo chart

componentDidMount() {
Services.getLoadAndUnbalanceData().then(res => {
const renderObj = ProcessData(res);
this.setState({
options: {
...this.state.options,
motion: {
...this.state.options.motion,
labels: renderObj.timestamp
},
series: [{
...this.state.options.series[0],
data: [{
sequence: [...renderObj.series[0].sequence]
}]
}],

xAxis: {
...this.state.options.xAxis,
softMax: renderObj.xSoftMax,
plotLines: [
{
...this.state.options.xAxis.plotLines[0],
value: renderObj.maxLoadThreshold,
label: {
...this.state.options.xAxis.plotLines[0].label,
text: renderObj.xLabelText
}
}
]
},
yAxis: {
...this.state.options.yAxis,
softMax: renderObj.ySoftMax,
plotLines: [
{
...this.state.options.yAxis.plotLines[0],
value: renderObj.maxUnbalanceThreshold,
label: {
...this.state.options.yAxis.plotLines[0].label,
text: renderObj.yLabelText
}
}
]
}
}
})
})
}


If I put data directly then highchart will load.



I am getting data like below.



 [{"sequence":[{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.83,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.5,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":38.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36.92,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":14,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.09,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":0,"y":0,"z":3,"name":"California"}]}]


I have given my entire class above.



While doing setState if I put series data directly highchart will load. But if I use dynamic data what I got from response then highchart is not loading wrt to data.



I am rendering highchart like below.



 <HighchartsReact
highcharts={Highcharts}
options={this.state.options}
constructorType={"chart"}
/>


My question is if I change the data dynamically using setState chart is not rendering. What is the cause here.



But if I debug in render all the data are available after setState. But highchart is not rendering wrt to series change.










share|improve this question
























  • Please provide a Minimal, Complete, and Verifiable example
    – ewolden
    Nov 21 at 8:50










  • Can you update the question to include the function/class code where setState is used?
    – Shawn Andrews
    Nov 21 at 8:50










  • @ewolden Please find the latest code
    – raj m
    Nov 21 at 8:57










  • @ShawnAndrews Please find latest code
    – raj m
    Nov 21 at 8:57










  • It looks like you are using setState correctly. My guess is the data you're setting this.state.options to after getting the API response is breaking the chart.
    – Shawn Andrews
    Nov 21 at 9:14















up vote
0
down vote

favorite












I am setting my series like below.



   import React, { Component } from "react";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import "../../../../resources/js/motion";
import HC_more from "highcharts/highcharts-more"; //module

import * as Services from '../../services/dashboardservices';
import ProcessData from './bubbleChartMethods';

require("highcharts/modules/map")(Highcharts);
HC_more(Highcharts); //init module

class BubbleContainer extends Component {

style = {
fontFamily: "'univers', Arial, sans-serif",
fontSize: 14,
color: "#333333"
};

state = {
options: {
chart: {
height: 380,
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
resetZoomButton: {
theme: {
states: {
hover: {
fill: '#D98C14',
stroke: '#BF7400',
}
}
}
}
},
credits: {
enabled: false
},

title: "",

legend: {
enabled: false
},

xAxis: {
gridLineWidth: 1,
title: {
text: 'Peak Load (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.05,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
style: this.style,
text: 'Peak Load Threshold',
align: 'center',
verticalAlign: 'middle'
},
zIndex: 3,
value: 30
}],
softMax: 0
},

yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Peak Unbalance (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.1,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
align: 'center',
style: this.style,
text: 'Peak Unbalance Threshold'
},
zIndex: 3,
value: 4
}],
softMax: 0
},
tooltip: {
useHTML: true,
padding: 2,
headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Load: </td><td>{point.x} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Unbalance: </td><td>{point.y} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.z}</td></tr>',
footerFormat: '</table></div>'
},

plotOptions: {
bubble: {
minSize: 20
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '..',
style: { fontSize: 10, color: 'rgba(67, 67, 72, 0.5)', textOutline: false, fillOpacity: 0.1 },
color: 'rgba(67, 67, 72, 0.5)'
},
cursor: 'pointer',
point: {
events: {
click: function () {
// $rootScope.$broadcast('loadHierarchy', { chartType: 'loadUnbalance', name: this.name });
}
}
}
}
},
motion: {
enabled: true,
axisLabel: 'year',
loop: false,
series: 0, // The series which holds points to update
updateInterval: 100,
magnet: {
round: 'round', // ceil / floor / round
step: 0.1
},
labels:
},
series: [{
name: 'Things',
colorByPoint: true,
id: 'deep',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)']
]
}
},
data:
}]
}
}
// Render app with demo chart

componentDidMount() {
Services.getLoadAndUnbalanceData().then(res => {
const renderObj = ProcessData(res);
this.setState({
options: {
...this.state.options,
motion: {
...this.state.options.motion,
labels: renderObj.timestamp
},
series: [{
...this.state.options.series[0],
data: [{
sequence: [...renderObj.series[0].sequence]
}]
}],

xAxis: {
...this.state.options.xAxis,
softMax: renderObj.xSoftMax,
plotLines: [
{
...this.state.options.xAxis.plotLines[0],
value: renderObj.maxLoadThreshold,
label: {
...this.state.options.xAxis.plotLines[0].label,
text: renderObj.xLabelText
}
}
]
},
yAxis: {
...this.state.options.yAxis,
softMax: renderObj.ySoftMax,
plotLines: [
{
...this.state.options.yAxis.plotLines[0],
value: renderObj.maxUnbalanceThreshold,
label: {
...this.state.options.yAxis.plotLines[0].label,
text: renderObj.yLabelText
}
}
]
}
}
})
})
}


If I put data directly then highchart will load.



I am getting data like below.



 [{"sequence":[{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.83,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.5,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":38.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36.92,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":14,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.09,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":0,"y":0,"z":3,"name":"California"}]}]


I have given my entire class above.



While doing setState if I put series data directly highchart will load. But if I use dynamic data what I got from response then highchart is not loading wrt to data.



I am rendering highchart like below.



 <HighchartsReact
highcharts={Highcharts}
options={this.state.options}
constructorType={"chart"}
/>


My question is if I change the data dynamically using setState chart is not rendering. What is the cause here.



But if I debug in render all the data are available after setState. But highchart is not rendering wrt to series change.










share|improve this question
























  • Please provide a Minimal, Complete, and Verifiable example
    – ewolden
    Nov 21 at 8:50










  • Can you update the question to include the function/class code where setState is used?
    – Shawn Andrews
    Nov 21 at 8:50










  • @ewolden Please find the latest code
    – raj m
    Nov 21 at 8:57










  • @ShawnAndrews Please find latest code
    – raj m
    Nov 21 at 8:57










  • It looks like you are using setState correctly. My guess is the data you're setting this.state.options to after getting the API response is breaking the chart.
    – Shawn Andrews
    Nov 21 at 9:14













up vote
0
down vote

favorite









up vote
0
down vote

favorite











I am setting my series like below.



   import React, { Component } from "react";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import "../../../../resources/js/motion";
import HC_more from "highcharts/highcharts-more"; //module

import * as Services from '../../services/dashboardservices';
import ProcessData from './bubbleChartMethods';

require("highcharts/modules/map")(Highcharts);
HC_more(Highcharts); //init module

class BubbleContainer extends Component {

style = {
fontFamily: "'univers', Arial, sans-serif",
fontSize: 14,
color: "#333333"
};

state = {
options: {
chart: {
height: 380,
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
resetZoomButton: {
theme: {
states: {
hover: {
fill: '#D98C14',
stroke: '#BF7400',
}
}
}
}
},
credits: {
enabled: false
},

title: "",

legend: {
enabled: false
},

xAxis: {
gridLineWidth: 1,
title: {
text: 'Peak Load (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.05,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
style: this.style,
text: 'Peak Load Threshold',
align: 'center',
verticalAlign: 'middle'
},
zIndex: 3,
value: 30
}],
softMax: 0
},

yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Peak Unbalance (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.1,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
align: 'center',
style: this.style,
text: 'Peak Unbalance Threshold'
},
zIndex: 3,
value: 4
}],
softMax: 0
},
tooltip: {
useHTML: true,
padding: 2,
headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Load: </td><td>{point.x} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Unbalance: </td><td>{point.y} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.z}</td></tr>',
footerFormat: '</table></div>'
},

plotOptions: {
bubble: {
minSize: 20
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '..',
style: { fontSize: 10, color: 'rgba(67, 67, 72, 0.5)', textOutline: false, fillOpacity: 0.1 },
color: 'rgba(67, 67, 72, 0.5)'
},
cursor: 'pointer',
point: {
events: {
click: function () {
// $rootScope.$broadcast('loadHierarchy', { chartType: 'loadUnbalance', name: this.name });
}
}
}
}
},
motion: {
enabled: true,
axisLabel: 'year',
loop: false,
series: 0, // The series which holds points to update
updateInterval: 100,
magnet: {
round: 'round', // ceil / floor / round
step: 0.1
},
labels:
},
series: [{
name: 'Things',
colorByPoint: true,
id: 'deep',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)']
]
}
},
data:
}]
}
}
// Render app with demo chart

componentDidMount() {
Services.getLoadAndUnbalanceData().then(res => {
const renderObj = ProcessData(res);
this.setState({
options: {
...this.state.options,
motion: {
...this.state.options.motion,
labels: renderObj.timestamp
},
series: [{
...this.state.options.series[0],
data: [{
sequence: [...renderObj.series[0].sequence]
}]
}],

xAxis: {
...this.state.options.xAxis,
softMax: renderObj.xSoftMax,
plotLines: [
{
...this.state.options.xAxis.plotLines[0],
value: renderObj.maxLoadThreshold,
label: {
...this.state.options.xAxis.plotLines[0].label,
text: renderObj.xLabelText
}
}
]
},
yAxis: {
...this.state.options.yAxis,
softMax: renderObj.ySoftMax,
plotLines: [
{
...this.state.options.yAxis.plotLines[0],
value: renderObj.maxUnbalanceThreshold,
label: {
...this.state.options.yAxis.plotLines[0].label,
text: renderObj.yLabelText
}
}
]
}
}
})
})
}


If I put data directly then highchart will load.



I am getting data like below.



 [{"sequence":[{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.83,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.5,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":38.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36.92,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":14,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.09,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":0,"y":0,"z":3,"name":"California"}]}]


I have given my entire class above.



While doing setState if I put series data directly highchart will load. But if I use dynamic data what I got from response then highchart is not loading wrt to data.



I am rendering highchart like below.



 <HighchartsReact
highcharts={Highcharts}
options={this.state.options}
constructorType={"chart"}
/>


My question is if I change the data dynamically using setState chart is not rendering. What is the cause here.



But if I debug in render all the data are available after setState. But highchart is not rendering wrt to series change.










share|improve this question















I am setting my series like below.



   import React, { Component } from "react";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import "../../../../resources/js/motion";
import HC_more from "highcharts/highcharts-more"; //module

import * as Services from '../../services/dashboardservices';
import ProcessData from './bubbleChartMethods';

require("highcharts/modules/map")(Highcharts);
HC_more(Highcharts); //init module

class BubbleContainer extends Component {

style = {
fontFamily: "'univers', Arial, sans-serif",
fontSize: 14,
color: "#333333"
};

state = {
options: {
chart: {
height: 380,
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
resetZoomButton: {
theme: {
states: {
hover: {
fill: '#D98C14',
stroke: '#BF7400',
}
}
}
}
},
credits: {
enabled: false
},

title: "",

legend: {
enabled: false
},

xAxis: {
gridLineWidth: 1,
title: {
text: 'Peak Load (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.05,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
style: this.style,
text: 'Peak Load Threshold',
align: 'center',
verticalAlign: 'middle'
},
zIndex: 3,
value: 30
}],
softMax: 0
},

yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Peak Unbalance (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.1,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
align: 'center',
style: this.style,
text: 'Peak Unbalance Threshold'
},
zIndex: 3,
value: 4
}],
softMax: 0
},
tooltip: {
useHTML: true,
padding: 2,
headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Load: </td><td>{point.x} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Unbalance: </td><td>{point.y} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.z}</td></tr>',
footerFormat: '</table></div>'
},

plotOptions: {
bubble: {
minSize: 20
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '..',
style: { fontSize: 10, color: 'rgba(67, 67, 72, 0.5)', textOutline: false, fillOpacity: 0.1 },
color: 'rgba(67, 67, 72, 0.5)'
},
cursor: 'pointer',
point: {
events: {
click: function () {
// $rootScope.$broadcast('loadHierarchy', { chartType: 'loadUnbalance', name: this.name });
}
}
}
}
},
motion: {
enabled: true,
axisLabel: 'year',
loop: false,
series: 0, // The series which holds points to update
updateInterval: 100,
magnet: {
round: 'round', // ceil / floor / round
step: 0.1
},
labels:
},
series: [{
name: 'Things',
colorByPoint: true,
id: 'deep',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)']
]
}
},
data:
}]
}
}
// Render app with demo chart

componentDidMount() {
Services.getLoadAndUnbalanceData().then(res => {
const renderObj = ProcessData(res);
this.setState({
options: {
...this.state.options,
motion: {
...this.state.options.motion,
labels: renderObj.timestamp
},
series: [{
...this.state.options.series[0],
data: [{
sequence: [...renderObj.series[0].sequence]
}]
}],

xAxis: {
...this.state.options.xAxis,
softMax: renderObj.xSoftMax,
plotLines: [
{
...this.state.options.xAxis.plotLines[0],
value: renderObj.maxLoadThreshold,
label: {
...this.state.options.xAxis.plotLines[0].label,
text: renderObj.xLabelText
}
}
]
},
yAxis: {
...this.state.options.yAxis,
softMax: renderObj.ySoftMax,
plotLines: [
{
...this.state.options.yAxis.plotLines[0],
value: renderObj.maxUnbalanceThreshold,
label: {
...this.state.options.yAxis.plotLines[0].label,
text: renderObj.yLabelText
}
}
]
}
}
})
})
}


If I put data directly then highchart will load.



I am getting data like below.



 [{"sequence":[{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.83,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.5,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":38.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36.92,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":14,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.09,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":0,"y":0,"z":3,"name":"California"}]}]


I have given my entire class above.



While doing setState if I put series data directly highchart will load. But if I use dynamic data what I got from response then highchart is not loading wrt to data.



I am rendering highchart like below.



 <HighchartsReact
highcharts={Highcharts}
options={this.state.options}
constructorType={"chart"}
/>


My question is if I change the data dynamically using setState chart is not rendering. What is the cause here.



But if I debug in render all the data are available after setState. But highchart is not rendering wrt to series change.







reactjs highcharts react-highcharts






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 21 at 9:22

























asked Nov 21 at 8:42









raj m

67321231




67321231












  • Please provide a Minimal, Complete, and Verifiable example
    – ewolden
    Nov 21 at 8:50










  • Can you update the question to include the function/class code where setState is used?
    – Shawn Andrews
    Nov 21 at 8:50










  • @ewolden Please find the latest code
    – raj m
    Nov 21 at 8:57










  • @ShawnAndrews Please find latest code
    – raj m
    Nov 21 at 8:57










  • It looks like you are using setState correctly. My guess is the data you're setting this.state.options to after getting the API response is breaking the chart.
    – Shawn Andrews
    Nov 21 at 9:14


















  • Please provide a Minimal, Complete, and Verifiable example
    – ewolden
    Nov 21 at 8:50










  • Can you update the question to include the function/class code where setState is used?
    – Shawn Andrews
    Nov 21 at 8:50










  • @ewolden Please find the latest code
    – raj m
    Nov 21 at 8:57










  • @ShawnAndrews Please find latest code
    – raj m
    Nov 21 at 8:57










  • It looks like you are using setState correctly. My guess is the data you're setting this.state.options to after getting the API response is breaking the chart.
    – Shawn Andrews
    Nov 21 at 9:14
















Please provide a Minimal, Complete, and Verifiable example
– ewolden
Nov 21 at 8:50




Please provide a Minimal, Complete, and Verifiable example
– ewolden
Nov 21 at 8:50












Can you update the question to include the function/class code where setState is used?
– Shawn Andrews
Nov 21 at 8:50




Can you update the question to include the function/class code where setState is used?
– Shawn Andrews
Nov 21 at 8:50












@ewolden Please find the latest code
– raj m
Nov 21 at 8:57




@ewolden Please find the latest code
– raj m
Nov 21 at 8:57












@ShawnAndrews Please find latest code
– raj m
Nov 21 at 8:57




@ShawnAndrews Please find latest code
– raj m
Nov 21 at 8:57












It looks like you are using setState correctly. My guess is the data you're setting this.state.options to after getting the API response is breaking the chart.
– Shawn Andrews
Nov 21 at 9:14




It looks like you are using setState correctly. My guess is the data you're setting this.state.options to after getting the API response is breaking the chart.
– Shawn Andrews
Nov 21 at 9:14

















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408141%2fhighchart-is-not-updating-on-series-state-change%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes
















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408141%2fhighchart-is-not-updating-on-series-state-change%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Berounka

Sphinx de Gizeh

Different font size/position of beamer's navigation symbols template's content depending on regular/plain...