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

How to implement drilldown in asp.net mvc project?

I created an ASP.NET MVC Project to display the average duration of different actions. To do this I used Highcharts. In the beginning, I show the average duration per hour in the chart. When I click on this chart I want to show the average duration of every minute, then every second, millisecond...
I tried to implement drill down but when I click on a bar nothing happens.
Here is the code of the Highchart and the data:
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
spacingBottom: 40,
spacingTop: 40
},
title: {
text: 'Performance and Error Analytics'
},
subtitle: {
text: 'Analytics of: ' + func
},
xAxis: [{
categories: timeArray,
crosshair: true,
title: {
text: 'Hours',
align: 'middle'
}
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Errors',
style: {
color: Highcharts.getOptions().colors[2]
}
}
}, { // Secondary yAxis
title: {
text: 'Duration in ms',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ms',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: 50,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,255,0.25)'
},
series: [{
name: 'Duration in ms',
type: 'column',
yAxis: 1,
data: durationPerHourArray,
tooltip: {
valueSuffix: ' ms'
}
}, {
name: 'Errors',
type: 'spline',
data: errorArray,
tooltip: {
valueSuffix: ' '
}
}],
drilldown: {
series: [{
type: 'column',
id: hourArray,
name: 'Duration every minute',
data: durationPerMinuteArray
}]
}
});
timeArray:
(3) […]
0: "9 Uhr"
​1: "10 Uhr"
​2: "11 Uhr"
durationPerHourArray:
(3) […]
​0: Object { y: 2.5, drilldown: 9 }
​1: Object { y: 3, drilldown: 10 }
​2: Object { y: 141.5, drilldown: 11 }
hourArray:
(3) […]
​0: 9
​1: 10
​2: 11
durationPerMinuteArray:
(3) […]
​0: {…}
​​id: Array [ 16 ]
​​y: Array [ 2.5 ]
​​<prototype>: Object { … }
1: {…}
​​id: Array(4) [ 13, 16, 20, … ]
​​y: Array(4) [ 3, 2, 5, … ]
​​<prototype>: Object { … }
2: {…}
​​id: Array [ 50, 53 ]
​​y: Array [ 143, 140 ]

Your drilldown options seems to be misconfigured. An id of drilldown series must be the same as drilldown in a base series:
series: [{
...,
data: [{
...,
drilldown: '1'
}, {
...,
drilldown: '2'
}, ...]
}],
drilldown: {
series: [{
id: '1',
data: [...]
}, {
id: '2',
data: [...]
}, ...]
}
Live demo: http://jsfiddle.net/BlackLabel/Lfjs57xt/
Docs: https://www.highcharts.com/docs/chart-concepts/drilldown

How to reduce HighStock chart gap between candles?

I'm using candlestick chart of HighChart-HighStock. I want to reduce the gap between candlesticks. It's not so bad when it's on a wide range zoom. But when I zoomed the chart a lot, the padding between candle makes me annoyed because they are too wide apart.
I tried setting pointPadding of plotOption&xAxis to 0, but nothing happened. How can I shrink this gap?
Zoomed chart - too wide gap between candlestick
Wide view chart - not so bad
Highcharts.stockChart('container', {
// title: { text: '---'},
rangeSelector: {
buttons: [
// { type: 'hour', count: 1, text: '1h' },
{
type: 'day',
count: 1,
text: '1d'
},
// { type: 'all', count: 1, text: 'All' }
],
selected: 1,
//inputEnabled: true
},
xAxis: [{
pointPadding: 0,
type: 'datetime',
}, {
type: 'datetime',
}],
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '70%',
lineWidth: 2,
resize: {
enabled: true
}
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2
}],
plotOptions: {
candlestick: {
pointPadding: 0,
downColor: 'blue',
upColor: 'red',
dataGrouping: {
enabled: false,
}
},
line: {
lineWidth: 1,
states: {
hover: {
enabled: false
}
}
}
},
series: [{
name: 'ohlc',
type: 'candlestick',
data: chartData,
},
{
name: 'avg5',
type: 'line',
data: avg5Data,
color: '#FF0000',
},
{
name: 'avg10',
type: 'line',
data: avg10Data,
color: '#0C9B3A',
},
{
name: 'avg20',
type: 'line',
data: avg20Data,
color: '#FF9900',
},
{
name: 'avg60',
type: 'line',
data: avg60Data,
color: '#000000',
},
{
name: 'vol',
type: 'column',
data: moneyData,
yAxis: 1,
color: '#0944a3',
dataGrouping: {
enabled: false,
}
}
],
});
}

You need to set the series.pointPadding combined with series.groupPadding (equal to zero) to achieve the expected effect. Here is the example: https://jsfiddle.net/ahxrk5zq/
series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: data,
groupPadding: 0,
pointPadding: 0.04,
dataGrouping: {
units: [
[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]
]
}
}]
API Reference:
https://api.highcharts.com/highstock/series.candlestick.pointPadding
https://api.highcharts.com/highstock/series.candlestick.groupPadding

Highcharts - Column chart customization

I am creating column chart using Highcharts library. I am trying to custom Column chart according my requirement but two things I am unable to do.
First, bottom border of the column chart and second is column background for all the series. Look at the image below, what I need to achieve.
What I have done so far is here: jsfiddle
jQuery(document).ready(function(jQuery) {
jQuery('#portlet-content').highcharts({
credits: {
enabled: false
},
exporting: {
enabled: false
},
chart: {
type: 'column'
},
title: {
text: 'Number of Applications'
},
subtitle: {
text: 'BY COUNTRY'
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
padding: 3,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
lineHeight: '14px'
},
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
tooltip: {
formatter: function() {
return '<b style="color:'+this.point.color+'">'+ this.y +'</b>';
},
useHTML: true,
borderWidth: 0,
style: {
padding: 0,
fontSize: '16px'
},
shadow: false
},
series: [
{
name: "United Kingdom",
color: '#32323A',
data: [
[294]
]
}, {
name: "USA",
color: '#EB4825',
data: [
[65]
]
}
, {
name: "United Arab Emirates",
color: '#F7CC1E',
data: [
[35]
]
}
, {
name: "India",
color: '#24C746',
data: [
[23]
]
}
, {
name: "Canada",
color: '#2587EC',
data: [
[18]
]
}
]
});
});

Note: I have modified my answer to better address the specific requests in the original poster's question.
Here's what I would suggest:
Create a stacked column chart, where one of the series is a "dummy" series with which the user can't interact. This will serve as your background.
Here's a quick fiddle I worked up based on the Highcharts stacked column demo: http://jsfiddle.net/brightmatrix/v97p3eam/
plotOptions: {
column: { stacking: 'percent' }
},
series: [
/* this is the "dummy" series
set the "showInLegend" and "enableMouseTracking" attributes
to "false" to prevent user interaction */
{ name: 'dummy data', data: [5, 3, 4, 7, 2], color:'gray',
showInLegend: false, enableMouseTracking: false },
/* here's the real data; set a unique color for each
set nulls for the columns where that color/data is not needed */
{ name: 'Series 1', color: 'red', data: [2,null,null,null,null] },
{ name: 'Series 2', color: 'orange', data: [null,2,null,null,null] },
{ name: 'Series 3', color: 'yellow', data: [null,null,2,null,null] },
{ name: 'Series 4', color: 'green', data: [null,null,null,2,null] },
{ name: 'Series 5', color: 'blue', data: [null,null,null,null,1] }
]
Please let me know if this is helpful for you!

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/