We Keep Coding

Highcharts - How to sort data by name?

I am currently working on a horizontal bar graph with Highcharts. I have 5 different categories Low, Medium Low, Medium, Medium High and High I would like to sort the data being returned from the graph by category name by descending order having Low be the starting point. For example, all Low data appears first in the graph, all Medium Low, all Medium appears next and so on.
I've done some research and it appears that the code below is what I need
dataSorting: {
enabled: true,
matchByName: true
},
but when applying this to HighCharts it did not affect my graph. Is this a feature that is provided in HighCharts? Is this something that is possible to do?
Here is a jsfiddle
My code:
let data = [10, 31, 13, 19, 21, 50, 10]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function() {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}, {
name: 'Medium-Low',
color: '#0B7070',
data: [data[2]]
}, {
name: 'Medium',
color: '#DC9603',
data: [data[3]]
},{
name: 'Low',
color: '#0D6302',
data: [data[1]],
showInLegend: false
},
{
name: 'Medium-High',
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'High',
color: '#C50710',
data: [data[5]]
}]
});
Current look:
Desired look:

You can use the index feature to define the affecting the order of rendering.
Demo: https://jsfiddle.net/BlackLabel/9Lsvmpbh/
series: [{
name: 'Low',
index: 4,
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}, {
name: 'Medium-Low',
index: 3,
color: '#0B7070',
data: [data[2]]
}, {
name: 'Medium',
index: 2,
color: '#DC9603',
data: [data[3]]
},{
name: 'Low',
index: 5,
color: '#0D6302',
data: [data[1]],
showInLegend: false
},
{
name: 'Medium-High',
index: 1,
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'High',
index: 0,
color: '#C50710',
data: [data[5]]
}]
API: https://api.highcharts.com/highcharts/series.line.index

You should reorder your series' objects. According to this, highchart doesn't have a property to sort automatically. You should insert first your Low series, then Medium Low etc. The thing you want to be the last one, you should put it first in the series.
Following this
let data = [10, 31, 13, 19, 21, 50, 10]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function() {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'sorted'
}
},
series: [{
name: 'High',
color: '#C50710',
data: [data[5]]
}, {
name: 'Medium-High',
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'Medium',
color: '#DC9603',
data: [data[3]]
},{
name: 'Medium-Low',
color: '#0B7070',
data: [data[2]]
},
{
name: 'Low',
color: '#0D6302',
data: [data[1]],
showInLegend: false
}, {
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}]
});
I got this result:

Echart Custom label in sunburst chart

option = {
tooltip: {},
series: {
label: { rotate: 'tangential', },
nodeClick: false,
radius: ['15%', '80%'],
type: 'sunburst',
sort: null,
data: [
{
name: "sun",
value: 3456,
itemStyle: { color: '#814175' },
label: { formatter: '{b}\n\n{c}' },
children: [{ name: '', value: 2221, itemStyle: { color: '#a4829d' }, }]
},
{
name: "mon",
value: 6555,
itemStyle: { color: '#498ce7' },
label: { formatter: '{b}\n\n{c}' },
children: [{ name: '', value: 5001, itemStyle: { color: '#79aefa' }, }]
},],
}
};
https://i.stack.imgur.com/lcA0o.jpg
This is my chart in the first picture.When i hover the chart the label was hide(second picture).
i need to show all label on hover.

The way to do this would be to assign the formatter for emphasis and downplay. You can have different formats for the default label, the label that is hovered and the non-hovered labels
series: [
{
type: 'sunburst',
data: [],
label: {
formatter: 'E.g. A \n{b}\n\n{c}'
},
emphasis: {
label: {
formatter: 'E.g. B \n{b}\n\n{c}'
}
},
downplay: {
label: {
formatter: 'E.g. C \n{b}\n\n{c}'
}
}
}
]

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 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!