Develop Reference

Highmaps - Change to mapbubble

I have been trying to change Highmaps chart to bubble by adding
type: 'mapbubble', as below but failed
Is there any way to do it ? I dont know where went wrong
series: [{
type: 'mapbubble',
data: data,
Appreciate if anyone can help me to do that base on the code below
Link to jsfiddle
mapChart = Highcharts.mapChart('mapchart', {
title: {
text: 'Population history by country'
},
subtitle: {
text: 'Source: The World Bank'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
// type: 'logarithmic',
endOnTick: false,
startOnTick: false,
min: 50000
},
tooltip: {
footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
},
series: [{
data: data,
mapData: mapData,
joinBy: ['iso-a3', 'code3'],
name: 'Current population',
allowPointSelect: true,
cursor: 'pointer',
states: {
select: {
color: '#a4edba',
borderColor: 'black',
dashStyle: 'shortdot'
}
}
}]
});

Replace point.value with point.z
data.push({
name: countries[code3].name,
code3: code3,
z: value,
year: year
});
Set chart.map prop to mapData:
chart: {
map: mapData
},
Create a new series which will be a background layer for bubbles.
series: [{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false
},
Set the main series type to mapbubble
{
data: data,
type: 'mapbubble',
...
live example: https://jsfiddle.net/xf4tkec1/

High stock avoid space between yAxis and first plot [duplicate]

It seems like Highcharts is adding some spacing between the 1. series line start/series line end and the 2. vertical axis.
Please see the jsfiddle link and below screenshot for more details.
http://jsfiddle.net/8kbf2e1x/
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
xAxis: {
categories: ['D1', 'D2', 'D3', 'D4']
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
verticalAlign: 'bottom'
},
plotOptions: {
series: {
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
How do I get rid of this spaces? I want my series lines to expand from ened to end within the plot area with no gaps. Is it achievable with smaller number of data points? (e.g. in my case every series has only 4 data points)

check pointPlacement
when pointPlacement is "on", the point will not create any padding of the X axis.
plotOptions: {
series: {
pointPlacement: 'on'
}
},
Fiddle demo

Highcharts Grouped stack x.axis name + category name

I am trying to get my highcharts graph to look like this or similar to this.
I have tried to use groupped category addon for highcharts, but it down not seem to work well with stack option.
sample in JSFiddle: http://jsfiddle.net/02ey1hbr/7/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
labels: {
rotation: -0,
style: {
fontSize: '10px',
align: 'Right',
}
},
categories: [{
name: "Case A",
categories: ["Male", "Female"]
}, {
name: "Case B",
categories: ["Male", "Female"]
}]
},
yAxis: {
min: 0,
title: {
text: 'x-axis'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'x',
data: [5,3,4,5],
stack: 'StackA'
}, {
name: 'y',
data: [3,5,4,5],
stack: 'StackA'
},{
name: 'x',
data: [5,3,4,5],
stack: 'StackB'
}, {
name: 'y',
data: [3,5,4,5],
stack: 'StackB'
}
]
});

To display bar the way you want, you need to get rid of the stack property from all series. Why do you want to preserve them? They are used for dividing series into groups. I also corrected position of labels using x property.
API Reference:
http://api.highcharts.com/highcharts/series%3Ccolumn%3E.stack
http://api.highcharts.com/highcharts/xAxis.labels.x
Example:
http://jsfiddle.net/sjtdgq9L/

Within my project, using stacks allows me to get better control over the 12 data sets in a series that is split into 2 stacks. Example in jsfiddle is a smaller version to get the proof of concept working and better interact with community. Stacks also make the code much easier to maintain.
Using: Proper x-axis for Highcharts stack group column as a reference, i was able to modify my example to: http://jsfiddle.net/02ey1hbr/11/ and achieve a working example with stacks. Its not perfect but really close to.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: [{
categories: ["Case A", "Case B","Case C", "Case D"],
labels: {
rotation: -90,
x: -60,
style: {
fontSize: '10px',
align: 'Right',
}
},
tickWidth: 1,
tickLength: 60,
},
{
categories: ['Male', 'Female','Male', 'Female','Male', 'Female','Male', 'Female'],
opposite: false,
labels: {
rotation: 0,
x: 60,
style: {
fontSize: '10px',
align: 'Right',
}
},
tickWidth: 0,
}],
yAxis: {
min: 0,
title: {
text: 'x-axis'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'x',
data: [1,8,9,16],
stack: 'StackA'
}, {
name: 'y',
data: [1,7,10,15],
stack: 'StackA'
},{
name: 'x',
data: [3,6,11,14],
stack: 'StackB'
}, {
name: 'y',
data: [4,5,12,13],
stack: 'StackB'
},
{
name: '',
data: [0,0,0,0,0,0,0,0],
showInLegend: false,
stack: 'StackB',
xAxis: 1
}
]
});

Change your series to:-
series: [{
name: 'x',
data: [5,3,4,5]
}, {
name: 'y',
data: [3,5,4,5]
},{
name: 'x',
data: [5,3,4,5]
}, {
name: 'y',
data: [3,5,4,5]
}
]

MACD + High chart Graph plotting issue

I'm stuck at MACD plotting in highchart.
I don't understand where I'm doing wrong. Please follow jsfiddle link and try to solve and plotting graph for MACD only.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: [{ // Primary yAxis for volume
title: {
text: 'volume',
style: {
color: 'blue'
}
},
height: '60%',
},{ // Secondary yAxis for Return
height: '60%',
opposite: true
},{
labels: {
align: 'left',
x: -3
},
title: {
text: 'MACD'
},
top: '65%',
height: '35%',
opposite: true
}],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [ { color: "blue",
data: [0.06694678963061322,0.22184874961635637,1,1.031408464251624,0.6989700043360187,1e-7,0.47712125471966244,1e-7,0.17609125905568124,0.6989700043360187,1e-7,1e-7,1e-7,0.47712125471966244,1e-7,0.47712125471966244,0.0791812460476248],
id: "left_bar",
name: "Sentiment",
type: "column",
},{
color: "#F09413",
data: [50,49.805,50.024142,51.9900907806,54.0333013483,56.1568100913,58.3637727279,60.5991052233,62.7140139956,65.2100317526,68.5422643752,72.0447740848,75.7262620405,80.3758545298,85.3109319979,89.457043293,3.9835696837],
id: "right_bar",
name: "Price",
type: "line",
yAxis: 1
},{
algorithm: "MACD",
linkedTo: "right_bar",
name: "MACD",
showInLegend: true,
type: "trendline",
yAxis: 1
}
]
});
});

Accoring to the code: https://rawgit.com/laff/technical-indicators/master/technical-indicators.src.js it looks like periods are hardcoded, so it is a reason why your macd is not calculated. You you no enough points.

Showing HighCharts series name on x-axis and in legend

I am trying to create a Column chart using Highcharts that show multiple series for one point in time only and I would like to show show the name of the series on the x-axis as well as being able to hide and show each series using the legend.
The closest I have been able to get to what I'm trying to achieve is by adding the categories and having multiple series.
xAxis: {
categories: [
'Tokyo',
'New York',
'London',
'Berlin'
]
}
and then adding multiple series with only one data point in each series
series: [{
name: 'Tokyo',
data: [49.9, null,null,null]
}, {
name: 'New York',
data: [null, 83.6,null,null]
}, {
name: 'London',
data: [null, null, 48.9,null]
}, {
name: 'Berlin',
data:[null, null, null, 42.4]
}]
The problem is that while this only shows one series for each point on the x-axis, Highcharts allocates space for each of the other series and when hiding a series only the series will be hidden not the label on the x-axis.
link to jsfiddle is here: http://jsfiddle.net/md2zk/

Set grouping: false in plotOptions, see: http://jsfiddle.net/Fusher/md2zk/5/

it's possible to hide Category along with the column.please go through the link given below . hope this will help.
http://jsfiddle.net/md2zk/633/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
type: 'category',
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
},
},
plotOptions: {
series: {
grouping: false,
events: {
legendItemClick: function () {
debugger;
if (this.visible) {
this.setData([], false)
}
else {
this.setData([this.chart.series[this.index].userOptions], true);
}
}
},
borderWidth: 0,
dataLabels: {
enabled: true,
//style: {
// color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
//},
},
},
},
series: [{
name: 'Tokyo',
data: [{name : 'Tokyo',y:49.9}],
y: 49.9
}, {
name: 'New York',
data: [{name : 'New York',y:83.6}],
y: 83.6
}, {
name: 'London',
data: [{name : 'London',y:48.9}],
y: 48.9
}, {
name: 'Berlin',
data:[{name : 'Berlin',y: 42.4}],
y: 42.4
}],
navigation: {
buttonOptions: {
enabled: true
}
}
});
});