We Keep Coding

Proper format of json for Highchart.js with multiple series

I have examples json data for Higcharts USD currency:
https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json
So i added simply one value to data, there not show in a chart.
[
[
1167609600000,
50,
30
],
[
1167609600001,
60,
40
],
[
1167609600002,
70,
50
]
]
My code:
function myFunction() { Highcharts.getJSON(
'http://192.168.0.157/log1.json', function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x', backgroundColor:"#e7ecea"
},
title: {
text: 'Pomiary'
},
subtitle: {
text: document.ontouchstart === undefined ?
'select' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'speed',
data: data
}, {
type: 'area',
name: 'speed2',
data: data
}]
}); } );
};
How i can add next series?

The simplest way is to use keys property:
series: [{
data: data
}, {
keys: ['x', 'someValue', 'y'],
data: data
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4797/
API Reference: https://api.highcharts.com/highcharts/series.line.keys

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

Align xAxis across line/column charts

I cannot get my common datetime xAxis to visually line up across line and column charts. I want the crosshairs to move in lockstep.
Here are line and column charts with synchronized crosshairs to demonstrate:
https://jsfiddle.net/aadhoc331/9xodqw4u/
(Note: I'm actually using current version of Highstock, but the fiddle is a minimal example)
Obligatory code (go to fiddle instead):
$('<div class="chart">')
.appendTo('#container')
.highcharts({
title: {
text: 'Chart A',
},
chart: {
type: 'line'
},
xAxis: {
type: 'datetime',
crosshair: true,
},
yAxis: {
title: {
text: undefined
},
labels: {
enabled: false,
},
},
series: [
{
name: 'Line',
type: 'line',
data: [
[1072915200000, 8000],
[1104537600000, 9000],
[1136073600000, 10000],
[1167609600000, 11000],
[1199145600000, 12000],
[1230768000000, 13000],
[1262304000000, 14000],
[1293840000000, 15000],
]
}
]
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
title: {
text: 'Chart B',
},
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
crosshair: true,
},
yAxis: {
title: {
text: undefined
},
labels: {
enabled: false,
},
},
plotOptions: {
column: {
stacking: 'normal',
}
},
series: [
{
type: 'line',
name: 'The Line',
data: [
[1072915200000, 800],
[1104537600000, 900],
[1136073600000, 1000],
[1167609600000, 1100],
[1199145600000, 1200],
[1230768000000, 1300],
[1262304000000, 1400],
[1293840000000, 1500],
]
},
{
type: 'column',
name: 'The Columns',
data: [
[1072915200000, 800],
[1104537600000, 900],
[1136073600000, 1000],
[1167609600000, 1100],
[1199145600000, 1200],
[1230768000000, 1300],
[1262304000000, 1400],
[1293840000000, 1500],
]
}
]
});

Set xAxis' minPadding, maxPadding properties:
xAxis: {
type: 'datetime',
crosshair: true,
minPadding: 0.08,
maxPadding: 0.08
}
https://jsfiddle.net/9xodqw4u/1/
Be advised that if you use a navigator you would need a different approach - navigator sets extremes and padding is reset.

Highcharts display series.name on X Axis

I'm trying to display each series name on X-Axis
http://jsfiddle.net/Jr79Y/9/
series: [{
name: 'Test',
data: [20]
}, {
name: 'Test',
data: [20]
}, {
name: 'Test',
data: [40]
}]
Does somebody knows how to do this?

This is a much simpler solution than anything I'm seeing for answers so far:
xAxis: {
categories:[]
}
.
series: [{
data: [{name:'Test 1',y:20,color:'red'},
{name:'Test 2',y:20,color:'blue'},
{name:'Test 3',y:40,color:'green'}]
}]
Example:
http://jsfiddle.net/jlbriggs/Jr79Y/37/
Although unless you have a really good reason for having each bar be a different color, it usually just adds unnecessary visual clutter and you're better off leaving them a single color.

http://jsfiddle.net/Jr79Y/35/
xAxis: {
categories: ['Test1', 'Test2', 'Test3']
}
For the series, this is quite dirty but it works:
series: [{
name: 'Test1',
data: [20, 0, 0]
}, {
name: 'Test2',
data: [0, 20, 0]
}, {
name: 'Test3',
data: [0, 0, 40]
}

Try this:
xAxis: {
categories: ['Test', 'Test', 'Test'],
title: {
text: null,
}
},
And in series part:
series: [{
name: 'Values',
data: [20,20,40]
},]
Reference.
EDITED:
You are using three group so you need to modify your data format. If you want the different color then try this:
series: [{
name: 'Values',
data: [20,0,0]
},
{
name: 'Values',
data: [0,20,0]
},
{
name: 'Values',
data: [0,0,40]
},]

Check this out
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories:['Test 1', 'Test 2', 'Test3']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
//colorByPoint: true
},
series: {
colorByPoint: true
}
},
legend: {
layout: 'vertical',
floating: true,
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
y: 60,
x: -60
},
series: [{
data: [40,20,20]
}]
});
});
http://jsfiddle.net/Jr79Y/36/

How to make a multi pane on highstock (highcharts) which contain a stacked area graph?

I want to know if it will be possible to use the two pane view (as this example) with a stacked area graph ?
I tryed to make it works in a fiddle http://jsfiddle.net/g2xDj/2/, but, the stacked area graph is not displayed.
var stacked_data = [{
name: 'Asia',
data: [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]]
}, {
name: 'Africa',
data: [[1364292000,106], [1364294000,107], [1364296000,111], [1364298000,133], [1364300000,221], [1364302000,767], [1364304000,1766]]
}, {
name: 'Europe',
data: [[1364292000,163], [1364294000,203], [1364296000,276], [1364298000,408], [1364300000,547], [1364302000,729], [1364304000,628]]
}];
var line_data = [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]];
// create the chart
$('#container').highcharts('StockChart',
{
chart : {
//type: 'area',
renderTo : 'container',
zoomType: 'x'
},
plotOptions: {
area: {
stacking: 'normal'
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'Load'
},
height: 200,
lineWidth: 2
},
{
title: {
text: 'Load 2'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}
],
series: [
{
name: "area",
data: stacked_data,
yAxis: 0
},{
name: "line",
data: line_data,
yAxis: 1
}]
});
});
Anybody have an idea to help me ?

In your example you have incorrect structure of series, because in stackedArea you try to push "series" structure for data.
Additionaly you should multiply all timestamp by 1000 to achieve JS timestamp format.
Updated example: http://jsfiddle.net/g2xDj/4/
var series = [{
name: 'Asia',
data: [
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]
}, {
name: 'Africa',
data: [
[1364292000000, 106],
[1364294000000, 107],
[1364296000000, 111],
[1364298000000, 133],
[1364300000000, 221],
[1364302000000, 767],
[1364304000000, 1766]
]
}, {
name: 'Europe',
data: [
[1364292000000, 163],
[1364294000000, 203],
[1364296000000, 276],
[1364298000000, 408],
[1364300000000, 547],
[1364302000000, 729],
[1364304000000, 628]
]
}];
var line_data = {
type:'line',
yAxis:1,
data:[
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]};
series.push(line_data);