We Keep Coding

Highcharts packed bubble chart not working for negative values

I am using High charts packed bubble chart and I need to show different sizes of bubbles according to its value (negative values). It is working fine when I pass positive values but size of the circle not changing when I pass negative values. Is there any way to show chart with negative values?
js fiddle link with code example
Highcharts.chart('container', {
chart: {
type: 'packedbubble',
height: '100%'
},
title: {
text: 'TOP Countries'
},
tooltip: {
useHTML: true,
pointFormat: '<b>{point.name}:</b> {point.value}'
},
plotOptions: {
packedbubble: {
minSize: '30%',
maxSize: '80%',
zMin: 0,
zMax: 1000,
layoutAlgorithm: {
splitSeries: false,
gravitationalConstant: 0.02
},
dataLabels: {
enabled: true,
format: '{series.name}',
filter: {
property: 'y',
operator: '>',
value: 250
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal'
}
}
}
},
series: [{
name: 'ASEAN',
data: [{
name: "ASEAN",
value: -88.2
}]
}, {
name: 'KOR ',
data: [{
name: "KOR",
value: -605.2
}]
}, {
name: 'CHN ',
data: [{
name: "CHN",
value: -427233.7
}]
}, {
name: 'ISA ',
data: [{
name: "ISA",
value: -355.39
}]
}, {
name: 'ANZ ',
data: [{
name: "ANZ ",
value: -3331.4
}]
}, {
name: 'JP ',
data: [{
name: "JP1",
value: -22470857.0
},{
name: "JP2",
value: -21470857.0
}]
}]
});
graph with negative values
graph with positive values

Properties zMin and zMax are not a part of official packedbubble series API, but they are internally used and work as in bubble series.
plotOptions: {
packedbubble: {
minSize: '30%',
maxSize: '80%',
//zMin: 0,
//zMax: 1000,
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/vro2wzL4/
API Reference:
https://api.highcharts.com/highcharts/series.packedbubble
https://api.highcharts.com/highcharts/series.bubble.zMin

Is there any way to merge this two x-axis in one axis?

I'm trying to combine the two x-axis in one axis.
I have two different series and the difference between them is in the time (some times in seconds and some times in minutes)
Here is my code:
var chart = new Highcharts.Chart({
chart:{
renderTo:'chart',
zoomType: 'xy',
type:'line'
},
title: {
text: '',
x: -20
},
subtitle:{
text:'',
x: -20
},
xAxis:[{
id:0,
type:'categories',
categories:finalarray.time1
},
{
id:1,
type:'categories',
categories:finalarray.time2,
}],
yAxis:{
title:{
text:'',
align:'high'
},
labels:{
overflow:'justify'
}
},
tooltip:{
crosshairs: [{
width: 1,
color: 'red'
}, true],
valueSuffix: ''
},
plotOptions:{
series:{
cursor:'pointer'
},
line:{
dataLabels:{
enabled:true
}
}
},
credits:{
enabled:false
},
series:[
{
xAxis:0,
name: finalarray.description1 + " ( " + finalarray.unit1 + " ) ",
data: finalarray.value1
},
{
xAxis:1,
name: finalarray.description2 + " ( " + finalarray.unit2 + " ) ",
data: finalarray.value2
}
]
});

To use only one xAxis, set the axis type to datetime and use data x values as timestamps:
Highcharts.chart('container', {
xAxis: {
type: 'datetime',
tickInterval: 5 * 60 * 1000
},
series: [{
data: [
{x: 1547480600, y: 12},
{x: 1547540600, y: 21},
{x: 1547600600, y: 9},
{x: 1547660600, y: 37}
]
}, {
data: [
{x: 1547480600, y: 9},
{x: 1547535600, y: 2},
{x: 1547590600, y: 29},
{x: 1547645600, y: 41}
]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/9c2zba74/

Sort descendants data in categories in highcharts

I want to sort data inside categories using highcharts. I try all data types but none work to me. it's possible? My wish would be (image from Paint):
click to see my expected result
original code (from http://jsfiddle.net/BKLrA/2/):
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Performance for the last week'
},
xAxis: {
type: 'category',
categories: ['Mon', 'Tue', 'Wed']
},
yAxis: {
min: 0,
title: {
text: '# of devices'
}
},
tooltip: {
enabled: false
},
series: [{
name: 'Green',
data: [
{
x: 0,
name: 'Mon',
y: 100
},
{
x: 1,
name: 'Tue',
y: 400
},
{
x: 2,
name: 'Wed',
y: 350
}
],
color: 'green'
}, {
name: 'Yellow',
data: [
//{
// name: 'Mon',
// y: 100
//},
{
x: 1,
name: 'Tue',
y: 140
},
{
x: 2,
name: 'Wed',
y: 170
}
],
color: 'yellow'
}]
});
});

You could use stacked series with clone series linkedTo (to allow legend click hide/show) to the main series. Basically each series would have to have as many linkedTo series as stacks there will be.
Example: http://jsfiddle.net/ju0p683j/

I would like to generate this data dynamically, but it seems like that is impossible, because there seems to be a natural method. The tool let me much at that point. Anyway thanks.

How to place labels on opposite Y axis in Highchart without a second series

I currently have the following chart set up in Highcharts:
// Initialize the chart when the document loads.
$(document).ready(function() {
$('#results').highcharts({
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: [{
categories: [
'Injustice: Gods Among Us ★',
'Tekken Tag Tournament 2 ★',
'Super Smash Bros. Melee ★',
'Persona 4 Arena',
'King of Fighters XIII',
'Dead or Alive 5 Ultimate',
'Street Fighter X Tekken Ver. 2013',
'Soulcalibur V'
],
}],
yAxis: {
allowDecimals: false,
title: {
text: 'Votes'
}
},
series: [{
data: [
{y:1426,color:'#29A329'},{y:823,color:'#29A329'},
{y:462,color:'#29A329'},{y:305,color:'#CC0000'},
{y:181,color:'#CC0000'},{y:148,color:'#CC0000'},
{y:127,color:'#CC0000'},{y:115,color:'#CC0000'}
],
dataLabels: {
color: '#FFFFFF',
enabled: true,
inside: true
},
showInLegend: false,
name: 'Votes'
}]
});
});
This produces a chart that looks like this:
Live example.
jsFiddle
What I'd like to do is have labels on the Y Axis on the opposite side (it's a string, nothing special).
I can add another series with empty data points, and get the labels I want (I'm writing the Javascript into the page from the server side to get this effect) with the following code additions:
// Initialize the chart when the document loads.
$(document).ready(function () {
$('#results').highcharts({
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: [{
categories: [
'Injustice: Gods Among Us ★',
'Tekken Tag Tournament 2 ★',
'Super Smash Bros. Melee ★',
'Persona 4 Arena',
'King of Fighters XIII',
'Dead or Alive 5 Ultimate',
'Street Fighter X Tekken Ver. 2013',
'Soulcalibur V'
],
}, {
categories: [
'8/5/2013 8:59 PM',
'8/5/2013 12:59 PM',
'8/5/2013 2:59 PM',
'8/5/2013 6:59 PM',
'8/5/2013 12:59 AM',
'8/5/2013 3:59 PM',
'8/5/2013 8:23 PM',
'8/5/2013 8:19 PM'],
opposite: true,
title: {
text: 'Last vote cast at'
}
}],
yAxis: {
allowDecimals: false,
title: {
text: 'Votes'
}
},
series: [{
data: [{
y: 1426,
color: '#29A329'
}, {
y: 823,
color: '#29A329'
}, {
y: 462,
color: '#29A329'
}, {
y: 305,
color: '#CC0000'
}, {
y: 181,
color: '#CC0000'
}, {
y: 148,
color: '#CC0000'
}, {
y: 127,
color: '#CC0000'
}, {
y: 115,
color: '#CC0000'
}],
dataLabels: {
color: '#FFFFFF',
enabled: true,
inside: true
},
showInLegend: false,
name: 'Votes',
xAxis: 1
}, {
data: [0, 0, 0, 0, 0, 0, 0, 0],
showInLegend: false
}]
});
});
jsFiddle
This gets me almost exactly what I want, except for one thing, the bars are now thinner, as space was made to accommodate the fake data series that isn't meant to be shown:
The question is, how do I get the labels on the right-side without these side effects? Note that I don't necessarily need the second data series, it's just the closed I've come to a solution. As long as the bars are displayed normally, I don't mind the mechanism by which those values on the right hand side are written.

You want a linked axis http://jsfiddle.net/U5Dhw/
xAxis: [{
categories: ['Injustice: Gods Among Us ★', 'Tekken Tag Tournament 2 ★', 'Super Smash Bros. Melee ★', 'Persona 4 Arena', 'King of Fighters XIII', 'Dead or Alive 5 Ultimate', 'Street Fighter X Tekken Ver. 2013', 'Soulcalibur V'],
},
{
categories: ['Fred', 'Tom', 'Bill', 'David', 'Nathan', 'Charles', 'Mike', 'Andrew'],
linkedTo: 0,
opposite: true
}],
http://api.highcharts.com/highcharts#xAxis.linkedTo

HighStock chart get hange browser when new data fill at 10sec interval [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Will setInterval cause browsers to hang?
i implement Highstock JS v1.1.4 chart for represent data
chart code :
chart = new Highcharts.StockChart({
chart: {
renderTo: 'highchartviewpanel',
events:{
load:function(){
setIntervalForhighchartdata();
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
},{
count: 5,
type: 'minute',
text: '5M'
},
{
count: 15,
type: 'minute',
text: '15M'
}],
selected:0,
inputEnabled: false
},
navigator: {
height: 40,
xAxis: {
valueDecimals: 1
}
},
title: {
text: 'payment analysis',
floating: true,
align: 'right',
x: -20,
top: 20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second : '%H:%M:%S',
minute : '%H:%M',
hour: '%H',
day : '%b,%d',
week : 'b,%d',
month : '%Y,%b',
year : '%Y'
},
valueDecimals: 0
},
yAxis: [
{
title: {
text: 'item1'
},
height: 50,
lineWidth: 2
}, {
title: {
text: 'item2'
},
top: 90,
height: 50,
offset: 0,
lineWidth: 2
},{
title: {
text: 'item3'
},
top: 150,
height: 50,
offset: 0,
lineWidth: 2
}],
series: [{
name: 'item1',
data: item1data,
color:'blue'
},
{
name: 'item2',
yAxis: 1,
data: item2data,
color:'black'
},{
name: 'item3',
yAxis: 2,
data: item3data,
color:'red'
}]
});
}
setIntervalForhighchartdata() is function which update graph every 10 sec and my data value is base on time interval xdata is datetime and ydata is data point of 1,2,3 ....
its hang browser some time when graph update

The function your calling probably doesn't complete itself before you call it again.I assume you're using setInterval(). If so, I'd suggest using it combined with setTimeout().
For more info check out this thread - Will setInterval cause browsers to hang?