Develop Reference

Legend in network graph ( Highchart Js)

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

Highcharts errors when webpage in chrome background tab

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

Creating Highcharts with Angular using Highcharts >= 5.0.0 and highcharts-ng >= 1.0.0 using a ChartFactory

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)

Syncfusion JS Chart Custom Tooltip

I'm using Syncfusion JS 12.1.0.43, trying to implement line chart with custom tooltip;
Here is my HTML;
<div id="div-overview-transaction-tooltip" style="display:none;">
<div id="div-transaction-tooltip-value">
<ul>
<li>#point.totalValue#</li>
<li>#point.dataSource.totalValue#</li>
<li>{{:totalValue}}</li>
<li>#series.dataSource.totalValue#</li>
</ul>
</div>
</div>
Here is my example JSON;
{"TotalValue":0,"Percentage":0,"AverageResponseTime":0,"DateTime":"\/Date(1402056000000)\/"}
And here is my JS;
$("#container").ejChart({
primaryXAxis: { labelFormat: "HH:00" },
primaryYAxis:
{
labelFormat: "{value}",
rangePadding: 'round',
range: { min: 0, max: 25, interval: 5 },
},
commonSeriesOptions: {
type: 'line', animation: true,
tooltip: { visible: true, template: 'div-overview-transaction-tooltip' },
marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true },
border: { width: 1 }
},
series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }],
canResize: true,
load: "loadTheme",
size: { height: 300 },
legend: { visible: true }
});
Output:
#point.TotalValue#
#point.dataSource.TotalValue#
{{:TotalValue}}
#series.dataSource.TotalValue#
I want to show all of my property from JSON on custom tooltip. Except tooltip everything works fine.
Any help would be appriciated. Thanks already.

By default the Tool-tip template supports only point.x and point.y so there is no direct way to achieve this using Tool-tip template.
However the value "TotalValue" from JSON can be shown in the Tool-tip with the help of the following event "toolTipInitialize" as like in below code snippet.
$("#container").ejChart({
primaryXAxis: { labelFormat: "HH:00" },
primaryYAxis:
{
labelFormat: "{value}",
rangePadding: 'round',
range: { min: 0, max: 25, interval: 5 },
},
commonSeriesOptions: {
type: 'line', animation: true,
tooltip: { visible: true, template: 'div-overview-transaction-tooltip' },
marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true },
border: { width: 1 }
},
series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }],
canResize: true,
load: "loadTheme",
size: { height: 300 },
toolTipInitialize:"rendertool"
legend: { visible: true }
});
And in the method "rendertool"
function rendertool(sender) {
sender.Data.currentText = "Total Value:"+sender.model.series[sender.Data.seriesIndex].dataSource.data[sender.Data.pointIndex].TotalValue.toString();
}
The sender of the event has the "model" properties of the chart where you can get the data source of the series and thus you can access any values in the JSON. Hope this works for you.
here is the sample link which I tried to achieve this.
Sample
Thanks

HIghcharts, button text undefined

I've trawled through the API and can't find where to define the alt text of custom nav buttons.
Can anyone help out?
Here's a sample of what I've got in my exporting options:
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
},
contextButton: {
menuItems: null,
symbol: 'url()',
symbolX: 1,
symbolY: 1,
width: 1,
height:1,
onclick: function() {
return false;
}
},
'downButton': {
symbol: 'url(img/glyphicons/glyphicons_200_download.png)',
symbolX: 13,
symbolY: 13,
width: 26,
height:26,
onclick: function() {
this.exportChart();
}
}
},
type: 'image/png'
},

_titleKey is what you want. See http://jsfiddle.net/x36qR/1/ for an example.

make sure you define lang: { }
parameter in the chart object
then use the _titleKey: "example" in the lang to set the desired title
.highcharts({
lang:{
example: "Title Name"
},