Highcharts with heavy data load crashes IE11 - reactjs

I'm using official Highcharts with React on a page to display different measurements. Everything works fine except for IE11 (go figure), which upon a specific scenario crashes the browser.
On the page the user is able to see measurements for daily, weekly, monthly etc. Each of these tabs then renders Highcharts with data for chosen time.
It works fine even in IE11 until user checks tab Monthly and to view the graph in hourly view (standard view for Monthly is a daily chart bar).
When Monthly -> Hourly view, the call responds with an object with about 700 arrays were the data is picked.
I did a test where I stripped the response for that specific scenario so that it showed only 50 entries = still a bit slow but didn't freeze on me.
I've been looking into this since it pretty much matches my issue as well but no luck:
https://github.com/highcharts/highcharts/issues/7725
Also, been trying to figure out how to provide a fiddle for this but the project is quite large which makes it difficult to pick bits and pieces.
So this is basically just a shout out to see if anyone has any other ideas. This works flawlessly in Chrome, Firefox etc.
I think it could be somewhat related to the amount of categories that are being set, just as the Github issue above says. But also, I've tried but no luck (or I did it wrong).
I'll provide the set of options that I have for Highcharts:
const options = {
chart: {
marginTop: 40,
animation: false,
},
title: {
text: ''
},
legend: {
enabled: this.state.resolutionType !== 'allyears',
reversed: true,
floating: true,
padding: 0,
x: 50,
align: 'left',
verticalAlign: 'top',
itemDistance: 5,
symbolRadius: 0,
symbolPadding: 2,
},
series: [{
type: this.state.graphType,
showInLegend: false,
data: this.state.newData,
tooltip: {
valueSuffix: ' :-'
}
},
{
type: this.state.graphType,
name: 'Historical',
visible: this.state.activeHistoricalData || this.state.activePreviousData,
showInLegend: false,
data: this.state.historicalData,
tooltip: {
valueSuffix: ' :-'
}
},
{
type: 'spline',
name: this.props.latestConsumptionContent('shortTemperature'),
visible: this.state.activeTemperature,
showInLegend: false,
showEmpty: false,
data: this.state.newTemp,
yAxis: 1,
tooltip: {
valueSuffix: ' .'
}
}],
plotOptions: {
series: {
maxPointWidth: 40,
connectNulls: true,
events: {
click: event => this.handleChartPointClick(event.point.time)
},
},
column: {
marker: {
enabled: false
}
},
line: {
marker: {
enabled: false
}
},
area: {
fillOpacity: 0.3,
marker: {
enabled: true,
symbol: 'circle'
}
}
},
xAxis: {
categories,
tickInterval: getTickInterval(this.state.resolutionType, this.state.periodTime),
reversedStacks: true,
autoRotation: false
}
},
yAxis: [{
min: 0,
title: {
text: ':-',
align: 'high',
offset: 0,
rotation: 0,
y: -20,
},
labels: {
format: getLabelFormat(this.state.resolutionType, this.state.periodTime),
}
},
{
title: {
text: this.props.latestConsumptionContent('shortTemperature'),
align: 'high',
offset: 0,
rotation: 0,
y: -20,
},
showEmpty: false,
reversed: this.state.reverseTemperatureAxis,
opposite: true
}],
credits: false
};

Related

High charts / Stacked Bar - Legends Disable hover

We have implemented high chart - Stacked bar as below -
const options = {
chart: {
….
},
title: {
text: ''
},
xAxis: {
visible: false,
categories: ['']
},
credits: {
enabled: false
},
yAxis: {
visible: false,
…….
},
legend: {
itemStyle: {
cursor: 'default',
fontWeight: 'normal'
},
reversed: true
},
plotOptions: {
series: {
cursor: 'default',
stacking: 'normal',
enableMouseTracking: false,
events: {
legendItemClick: function () {
return false;
}
},
states: {
hover: {
enabled: false
}
}
}
},
tooltip: {
useHTML: true,
enabled: false,
outside: true,
followPointer: true,
crosshairs: false,
},
accessibility: {
…….
},
exporting: {
enabled: false
},
series: props.series
};
It loads fine, also hovering on any of the block does not change opacity for other blocks.
How can we disable hovering on legends below stacked bar?
Example - http://jsfiddle.net/clockworked247/FGmgC/
In above link, basically hover effect on John, Joe, Jane, Janet legends need to be disabled.
Thanks all.
Below answer helped, and worked.
Above link should help. If you are looking for more solutions you can also achieve it using CSS. Make pointer event none for legends like .highcharts-legend-item:{ pointer-events:none; }

How can i do autozoom when i receive new values

I have a component with barChart, but i have a socket that i receive new values for this barchart. If the value change from 19 to 200, i must do double click for reset zoom. There are any config for do that automatically?
my plotly config is:
layout: {
autosize: true,
xaxis: {
title: bottomText,
autorange: true
},
yaxis: {
title: leftText,
autorange: true
},
dragmode: 'zoom',
hovermode: 'closest',
margin: {
t:20,
b: 150
},
transition: {
duration: 500,
easing: 'cubic-in-out'
}
},
data: [{
x: details.index,
y: details.fw,
type: 'bar'
}],
config: {
displaylogo: false,
locale: 'es',
}
You can reset the zoom by assigning a new value to layout.uirevision when updating your chart. See https://plot.ly/javascript/uirevision/#reset-user-changes

HIghchart Area Chart display NULL value in a wrong way

I have a series data like this [null,0,null,null,null,null,0.86,null,0,null]
As you can see, there are only three points in it.
However it has been displayed as below,
Please see the demo here,
Highcharts.chart('container', {
chart: {
type: 'area',
spacingBottom: 30
},
title: {
text: 'Fruit consumption *'
},
xAxis: {
categories: ["Term 3_week1","Term 3_week2","Term 3_week3","Term 3_week4","Term 3_week5","Term 3_week6","Term 3_week7","Term 3_week8","Term 3_week9","Term 3_week10"]
},
yAxis: {
title: {
text: 'Y-Axis'
}
},
plotOptions: {
area: {
fillOpacity: 0.5
}
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [null,0,null,null,null,null,0.86,null,0,null]
}]
});
I am quite confused why this been displayed like this.
Can anyone help?
Thanks
First if you look your demo on firefox it will only show 3 points without any area.
Now you may try to use connectNulls Api Doc like that :
chart: {
type: 'scatter',
spacingBottom: 30
},
plotOptions: {
area: {
fillOpacity: 0.5,
connectNulls:true
}
},
Edit: New type of chart
Updated Fiddle

how to add data from mongodb database to highchart-ng

This is the highchart code in angular controller
I am using charts for the first time in angularjs.I want to show data from my mongodb database like on x-axis all the names of tasks and on y-axis the total time required by that particular task to complete i.e- Total Duration.
I have added static data for the html to look like the attached image.
I am developing a project using MEAN Stack.I want to how know how do i add the data i get from database to highcharts.
This is how the output should look without statically giving data:
var tasks = ['Task1','Task2','Task3' ]
var res = [26,61,1]
$scope.chartConfig = {
chart: {
type: 'column'
},
title: {
text: 'Task Duration'
},
xAxis: {
categories: tasks,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Task Duration (Hrs)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span>
<table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">
{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tasks',
data: res
}]
}

How we configure highchart x axis start from first tick?

I am learning highchart with angularJs, first tick of x axis is not starting from 0 or we can say that left most corner of chart, here I attached screen shot of output which I am having now,
For this I refer this solution which worked but not working properly when only 2 values are there on x-axis it displayed 0.5 only on center on x axis, not showing actual value.
I am doing like this in my example,
xAxis: {
labels: {
enabled: true,
formatter: function () {
return this.value;
}
},
tickmarkPlacement: 'on',
gridLineWidth: 0,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
align: "left",
lineColor: 'transparent'
}
Can anyone please guide me for the same.?
Add the following for the required functionality, it will start from leftmost point :
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
}
I think set Y-axis min value and X-axis min value.
xAxis: {
labels: {
enabled: true,
formatter: function () {
return this.value;
}
},
tickmarkPlacement: 'on',
gridLineWidth: 0,
min: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
align: "left",
lineColor: 'transparent'
},
yAxis: {
min: minYAxisValue,
max: maxYAxisValue
}
Hope so it may be helpful..

Resources