I've built a spline mirror chart, I've set all initial values in the constructor and the chart loads perfectly fine. The issue occurs when I try to update, I just don't want to update the series. I want to update the whole chart including x and y axis as those values are dynamic.
this.state = {
chartOptions: {
credits: {
enabled: false
},
time: {
timezone: ''
},
chart: {
backgroundColor: '#272727',
zoomType: 'x',
panning: true
},
title: {
text: null,
style: {
color: '#E0E0E0',
fontSize: '20px'
},
align: 'left'
},
legend: {
useHTML: true,
borderWidth: 0,
itemMarginBottom: 5,
itemStyle: {
color: '#E0E0E0',
fontWeight: 'normal',
fontSize: '11px'
}
},
tooltip: {
useHTML: true,
followPointer: false,
formatter: function(){
return this.points.reduce(function(s, point){
let positiveValue = Highcharts.numberFormat(Math.abs(point.y), 0);
return '<div style="display: none;"><p style="display: none;font-size: 14px; margin: 2px 3px 2px 3px; color:#414549;">' + positiveValue + ' ' + point.series.name + '</p>';
}, '<p style="display: none;font-size: 11px; margin: 0px 3px 4px 3px; color: #7C7D80;"> Sustained at: ' + Highcharts.dateFormat('%H:%M:%S.%L', this.x) + '</p></div>');
},
shared: true,
borderWidth: 0,
borderRadius: 5,
padding: 10,
style: {
opacity: 0,
backgroundColor: '#272727'
}
},
xAxis: {
type: 'datetime',
lineColor: '#9F9F9F',
tickColor: '#9F9F9F',
tickLength: 0,
labels: {
style: {
color: '#9F9F9F'
}
},
index: 2,
min: startTime,
max: endTime
},
yAxis: [
{
// Primary yAxis
min: 0,
tickAmount: 3,
gridLineColor: '#474747',
gridLineWidth: 1,
title: {
text: null
},
opposite: true,
height: '50%',
plotLines: [
{
color: '#E0E0E0',
width: 1,
value: 0,
zIndex: 2
}
]
},
{
// Secondary yAxis
//reversed: true,
max: 0,
tickAmount: 3,
gridLineColor: '#474747',
gridLineWidth: 1,
title: {
text: null
},
labels: {
format: '{value} Gs',
formatter: function(){
let positiveValue = Highcharts.numberFormat(Math.abs(this.value), 0);
return positiveValue;
}
},
top: '50%',
height: '50%',
plotLines: [
{
color: 'white',
width: 1,
value: 0,
dashStyle: 'shortdot',
zIndex: 2
}
]
}
],
annotations: [
{
shapes: chartAnnotations
}
],
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function(e){
try {
var return_object = {
x: this.x,
y: this.y,
id: e.point.impact,
max_rotational: e.point.impact_max_rotational,
max_linear: e.point.impact_max_linear,
category: e.point.category
};
window.postMessage(JSON.stringify(return_object));
return;
function examine_variable(object_to_examine){
function get_class(object){
return Object.prototype.toString.call(object);
}
var event_objects = {};
// So here we can get get e.point.index.
for (var k in object_to_examine) {
var sub_key_count = 0;
var type = get_class(object_to_examine[k]);
if (type == '[object String]') {
event_objects[k] = object_to_examine[k];
} else if (type == '[object Object]') {
event_objects[k] = {};
// Go a second level deep:
for (var k2 in object_to_examine[k]) {
sub_key_count++;
event_objects[k][k2] = '' + object_to_examine[k][k2];
}
} else event_objects[k] = '' + object_to_examine[k];
}
window.postMessage(JSON.stringify(event_objects));
}
window.postMessage("Examining the event 'e' variable");
examine_variable(e);
if (e.point) {
window.postMessage("Examining the event 'e.point' variable");
examine_variable(e.point);
}
window.postMessage("Examining whtever 'this' is");
examine_variable(this);
} catch (exception) {
window.postMessage('Exception in the highcharts click: ' + exception);
}
}
}
}
}
},
series: [
{
data: maxLinearDataset,
name: '<span style="position: relative; top:2px">Gs</span>',
type: 'spline',
color: maxLinearColor,
yAxis: 1,
lineWidth: 0,
marker: {
symbol: 'circle',
enabled: true,
states: {
hover: {
enabled: true
}
},
radius: 5
},
states: {
hover: {
lineWidthPlus: 0
}
},
tooltip: {
valueSuffix: ' Gs',
valueDecimals: 0
}
},
{
name: '<span>rad/s<sup>2</sup></span>',
type: 'spline',
data: maxRotationalDataset,
color: maxRotationalColor,
lineWidth: 0,
marker: {
symbol: 'circle',
enabled: true,
states: {
hover: {
enabled: true
}
},
radius: 5
},
states: {
hover: {
lineWidthPlus: 0
}
},
tooltip: {
valueSuffix: ' <span>rad/s<sup>2</sup></span>',
valueDecimals: 0
}
}
]
}
};
After the values are updated I would like to redraw the chart with new data but when I
this.setState ({
chartOptions: {
credits: {
enabled: false
},
time: {
timezone: ''
},
chart: {
backgroundColor: '#272727',
zoomType: 'x',
panning: true
},
title: {
text: null,
style: {
color: '#E0E0E0',
fontSize: '20px'
},
align: 'left'
},
legend: {
useHTML: true,
borderWidth: 0,
itemMarginBottom: 5,
itemStyle: {
color: '#E0E0E0',
fontWeight: 'normal',
fontSize: '11px'
}
},
tooltip: {
// enabled: false,
useHTML: true,
followPointer: false,
formatter: function(){
return this.points.reduce(function(s, point){
let positiveValue = Highcharts.numberFormat(Math.abs(point.y), 0);
return '<div style="display: none;"><p style="display: none;font-size: 14px; margin: 2px 3px 2px 3px; color:#414549;">' + positiveValue + ' ' + point.series.name + '</p>';
}, '<p style="display: none;font-size: 11px; margin: 0px 3px 4px 3px; color: #7C7D80;"> Sustained at: ' + Highcharts.dateFormat('%H:%M:%S.%L', this.x) + '</p></div>');
},
shared: true,
borderWidth: 0,
borderRadius: 5,
padding: 10,
style: {
opacity: 0,
backgroundColor: '#272727'
}
},
xAxis: {
type: 'datetime',
lineColor: '#9F9F9F',
tickColor: '#9F9F9F',
tickLength: 0,
labels: {
style: {
color: '#9F9F9F'
}
},
index: 2,
min: startTime,
max: endTime
},
yAxis: [
{
// Primary yAxis
min: 0,
tickAmount: 3,
gridLineColor: '#474747',
gridLineWidth: 1,
title: {
text: null
},
opposite: true,
height: '50%',
plotLines: [
{
color: '#E0E0E0',
width: 1,
value: 0,
zIndex: 2
}
]
},
{
// Secondary yAxis
//reversed: true,
max: 0,
tickAmount: 3,
gridLineColor: '#474747',
gridLineWidth: 1,
title: {
text: null
},
labels: {
format: '{value} Gs',
formatter: function(){
let positiveValue = Highcharts.numberFormat(Math.abs(this.value), 0);
return positiveValue;
}
},
top: '50%',
height: '50%',
plotLines: [
{
color: 'white',
width: 1,
value: 0,
dashStyle: 'shortdot',
zIndex: 2
}
]
}
],
annotations: [
{
shapes: chartAnnotations
}
],
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function(e){
try {
var return_object = {
x: this.x,
y: this.y,
id: e.point.impact,
max_rotational: e.point.impact_max_rotational,
max_linear: e.point.impact_max_linear,
category: e.point.category
};
window.postMessage(JSON.stringify(return_object));
return;
function examine_variable(object_to_examine){
// Examine the event object or some other local object to see
// what we can pass
function get_class(object){
return Object.prototype.toString.call(object);
}
var event_objects = {};
// So here we can get get e.point.index.
for (var k in object_to_examine) {
var sub_key_count = 0;
var type = get_class(object_to_examine[k]);
if (type == '[object String]') {
event_objects[k] = object_to_examine[k];
} else if (type == '[object Object]') {
event_objects[k] = {};
// Go a second level deep:
for (var k2 in object_to_examine[k]) {
sub_key_count++;
event_objects[k][k2] = '' + object_to_examine[k][k2];
}
} else event_objects[k] = '' + object_to_examine[k];
}
window.postMessage(JSON.stringify(event_objects));
}
window.postMessage("Examining the event 'e' variable");
examine_variable(e);
if (e.point) {
window.postMessage("Examining the event 'e.point' variable");
examine_variable(e.point);
}
window.postMessage("Examining whtever 'this' is");
examine_variable(this);
} catch (exception) {
window.postMessage('Exception in the highcharts click: ' + exception);
}
}
}
}
}
},
series: [
{
data: maxLinearDataset,
name: '<span style="position: relative; top:2px">Gs</span>',
type: 'spline',
color: maxLinearColor,
yAxis: 1,
lineWidth: 0,
marker: {
symbol: 'circle',
enabled: true,
states: {
hover: {
enabled: true
}
},
radius: 5
},
states: {
hover: {
lineWidthPlus: 0
}
},
tooltip: {
valueSuffix: ' Gs',
valueDecimals: 0
}
},
{
name: '<span>rad/s<sup>2</sup></span>',
type: 'spline',
data: maxRotationalDataset,
color: maxRotationalColor,
lineWidth: 0,
marker: {
symbol: 'circle',
enabled: true,
states: {
hover: {
enabled: true
}
},
radius: 5
},
states: {
hover: {
lineWidthPlus: 0
}
},
tooltip: {
valueSuffix: ' <span>rad/s<sup>2</sup></span>',
valueDecimals: 0
}
}
]
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent