I need some help with the following issue: it looks like since the latests Highcharts update (v7.0.2 2019-01-17), my pages are not working only when refreshing in background. If the webpage is always visible on my screen, everything will go smoothly, but if I have another chrome tab displayed on my screen, the update will not work and I will have this error:
highcharts.src.js:39446 Uncaught TypeError: Cannot read property 'pos' of undefined
at a.SVGElement.step (highcharts.src.js:39446)
at a.SVGElement.animate (highcharts.src.js:3654)
at r.animate (highcharts.src.js:39437)
at r.x (highcharts-more.src.js:7599)
at r.a.(anonymous function) [as animate] (https://code.highcharts.com/highcharts.js:20:270)
at render (highcharts.src.js:35110)
at highcharts.src.js:28431
at Array.forEach (<anonymous>)
at a.Chart.renderSeries (highcharts.src.js:28429)
at a.Chart.render (highcharts.src.js:28570)
The Javascript code for this chart is as follows:
Highcharts.chart('MychartID', {
chart: {
zoomType:'x',
alignTicks: false
},
tooltip: {
shared:false,
},
title: {
text: 'Title'
},
xAxis: {
type: 'category',
title: {
enabled: false,
text: 'PTU',
},
},
yAxis: [{
lineWidth: 1,
title: {
text: 'y1'
}
},
{
lineWidth: 1,
title: {
text: 'y2'
}
},
],
plotOptions: {
line: {
dataLabels: {
enabled: false,
},
},
column: {
dataLabels: {
enabled: true,
},
}
},
series: [
{
yAxis: 1,
type: 'column',
name: 'serie1',
data: serie1
},
{
name: 'serie2',
data: serie2
},
]
});
Do you have any idea of what is going wrong?
Thank you for your help!
This issue was a bug and it is fixed. It will be available in the next release of Highcharts.
The solution before release is to use code from Highcharts GitHub master branch where this bug is solved. You can download it here: https://github.highcharts.com/master/highcharts.src.js
Related
I want to show the user about which nodes are some sort of type in network graph of Highchart JS.
For example, the red node would be about "car" and the black node would be about "person".
How can I implement such a legend in Highchart Js?
Here is my codepen.
Highcharts.seriesTypes.networkgraph.prototype.drawLegendSymbol = Highcharts.LegendSymbolMixin.drawRectangle;
Highcharts.chart('container', {
chart: {
type: 'networkgraph'
},
plotOptions: {
networkgraph: {
keys: ['from', 'to']
}
},
legend: {
enabled: true
},
series: [{
showInLegend: true,
data: [
['A', 'B'],
['C','D'],
['E','F']
],
nodes:[{
id:'A',
color:'#ff1000'
},{
id:'B',
color:'#222222'
},
{
id:'C',
color:'#ff1000'
},
{
id:'D',
color:'#222222'
},
{
id:'E',
color:'#ff1000'
},
{
id:'F',
color:'#222222'
},]
}]
});
Thank you in advance.
Have you tried adding the dataLabel to series property and add a name to your nodes.
{
id: "A",
color: "#ff1000",
name: "car" <--------- name property
},
Something like this:
series: {
dataLabels: {
linkFormat: '',
enabled: true,
format: "{point.name}",
crop: false,
defer: false,
useHtml: true,
},
}
Full example:
https://codepen.io/tiagotedsky/pen/zYZYOLR
in my chart highcharts connect the start and end point of the graph. I dont want this to happen . how can I solve it. js fiddle link:https://jsfiddle.net/mdng223/h2o57agx/
My question is similar to this but have not got the solution provided herehttps://www.highcharts.com/forum/viewtopic.php?t=43018
Highcharts.setOptions({
global: {
useUTC: false
}
});
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
tooltip: {
xDateFormat: '%d/%m/%Y',
shared: true,
split: false,
enabled: true
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
crosshair: {
snap: true
}
},
legend: {
enabled: true
},
series: [{
data: []
},]
});
You have unsorted data: https://www.highcharts.com/errors/15/
Here: https://jsfiddle.net/BlackLabel/7rzb6e85/ you can find out which elements in the data array are unsorted.
And here is how you can sort your data by x values:
data.sort((a,b) => a[0] - b[0]);
Live demo: https://jsfiddle.net/BlackLabel/w7x6dtLo/
it works fine you have to add .sort() at the end of your data array to solve this issue
I would like to make the transition from pre-version 5.0.0 Highcharts and highcharts-ng version 0.0.12 to the latest versions.
I know there are some critical changes in the chart object, as well as with how highcharts-ng works in the latest versions. I have been searching for an example on how to set my Angular environment up using these latest versions, but it seems there is a great shortage on resources using these versions.
I was hoping you could help me with setting this up.
I have tried numerous changes myself, but I keep getting errors I did not get with the older versions of the scripts. Errors such as:
"Unable to get property of 'series' of undefined or null reference
(at $doCheck
(http://localhost:50262/app/vendorScripts/highcharts-ng.js:51:16))",
"Cannot set property 'getChartObj' of undefined" (at HighChartNGController.$onInit (highcharts-ng.js:36)),
"Multiple definitions of a property not allowed in strict mode (ChartFactory)"
This is my working solution pre-latest versions:
Here is my ChartFactory:
'use strict';
angular.module('portalDashboardApp')
.factory('ChartFactory', function () {
return {
getChartConfig: function () {
return {
options: {
chart: {
type: 'bar',
height: 400,
spacingTop: 30,
spacingBottom: 10,
spacingLeft: 10,
spacingRight: 50,
zoomType: 'x',
backgroundColor: false,
resetZoomButton: {
position: {
x: 0,
y: 40
}
}
},
credits: {
enabled: false
},
navigation: {
buttonOptions: {
y: -30
}
},
tooltip: {
formatter: function () {
return '<b>' + this.y + ' ' + this.series.name + '</b>';
}
},
plotOptions: {
column: {
stacking: ''
},
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
},
showInLegend: true
},
series: {
animation: true,
point: {
events: {
click: function () {
}
}
},
dataLabels: {
enabled: true,
format: ''
}
}
},
exporting: {
sourceWidth: 1600,
sourceHeight: 800,
// scale: 2 (default)
chartOptions: {
subtitle: null
},
buttons: {
contextButton: {
text: 'Export Chart'
}
}
}
},
title: {
text: false
},
xAxis: {
type: 'category'
},
yAxis: {
gridLineWidth: 1,
title: {
text: 'Count'
},
labels:
{
enabled: true,
format: '{value}'
}
},
legend: {
layout: 'vertical',
floating: true,
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
y: 60,
x: -60
},
series: [{}],
loading: false
};
}
};
});
This is how I would create a chart in my Angular controller:
I would inject my ChartFactory
Get my data from mt API call
And then set up, customize and apply my data for my chart using these methods:
function volumeGraphConfig(timeline_data, time_trend) {
$scope.VolumeGraphChartConfig = ChartFactory.getChartConfig();
$scope.VolumeGraphChartConfig.chart.type = 'column';
}
function populateVolumeData(timeline_data, time_trend) {
$scope.VolumeGraphChartConfig.xAxis.categories = timeline_data;
$scope.VolumeGraphChartConfig.series = [{
name: 'Twitter',
data: time_trend.Twitter,
color: twitterColor
}, {
name: 'Instagram',
data: time_trend.Instagram,
color: instagramColor
}, {
name: 'Youtube',
data: time_trend.Youtube,
color: youtubeColor
}];
$scope.VolumeGraphChartConfig.tooltip = {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <strong>{point.y}</strong> mentions<br/>',
shared: false
};
}
I would then display my chart using this HTML div:
<highchart id="FacebookVolume" config="volumeGraphChartConfig"></highchart>
How can I change this to work with the latest versions? Thank you!
The first two errors:
Cannot set property 'getChartObj' of undefined
Unable to get property of 'series' of undefined or null reference
happen when your config object is undefined.
For your case, you need to use the same variable you declared on your $scope
<highchart id="FacebookVolume" config="VolumeGraphChartConfig"></highchart>
(capital V)
I need a solution to add unique URL's to my series.
This former question, unfortunately does not work anymore.
series: [{
name: 'batch',
visible: false,
marker: {
enabled: false,
states: {
hover: {
enabled: true
}
},
symbol: 'square'
},
data:[56.5,50.1,49.4,50.8,51.8,50.4,51.1,50],
color: 'darkred',
}, {
Something like this?
series:[{data: [ [123.12,'http://goole.com'],[332.32,'http://zzs.com'] ] }]
I am using angularjs highchart by integrating the DI of highcharts-ng
I have created different type of charts by following options
var chart = {
options: {
chart: {
type: 'bar'
}
},
title: {
text: chartData.name
},
subtitle: {
text: chartData.subname
},
rangeSelector: {
enabled:true,
selected: 1
},
xAxis: {
title: {
text: chartData.x.title
}
},
yAxis: {
title: {
text: chartData.y.title
}
},
series: [{
name: chartData.data[0].name,
data: chartData.data[0].data,
dashStyle: 'longdash'
}, {
name: chartData.data[1].name,
data: chartData.data[1].data,
dashStyle: 'dot'
}, {
name: chartData.data[2].name,
data: chartData.data[2].data
}]
}
I have added rangeslider options but its not reflecting in chart.
How to integrate highchart range slider in angualrjs
Include a reference to highstock instead of highcharts. Both are compatible with highcharts-ng, but only highstock supports rangeSelector. Then, move rangeSelector into the options object. Note - "range slider" functionality is called navigator in the highstock docs, and must also be added to options.
var chart = {
options: {
chart: {
type: 'bar'
},
rangeSelector: {
enabled: true
},
navigator: {
enabled: true
}
}
...
};
Here is a demo, from highcharts-ng's GitHub page:
http://jsfiddle.net/pablojim/r88yszk0/