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:

Add Title To Each Bubble in Packed Bubble Highcharts

I have a packed bubble chart that works great. I would like to add a title to each of the larger, separated bubbles. The title should always show and I would like it to be the name of the series. I'm using a split series.
The 'name' attribute shows up in the tooltip, but I would like it to always be displayed.
Here is the code to create the bubbles:
Highcharts.chart('bubble-split-chart', {
chart: {
type: 'packedbubble',
animation: false,
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#15191b'],
[1, '#15191b']
]
},
},
// remove hamburger button
exporting: {
enabled: false
},
// remove chart watermark (highcharts.com)
credits: {
enabled: false
},
title: {
text: '',
enabled: false
},
tooltip: {
useHTML: true,
pointFormat: '<b>{point.name}</b>'
},
plotOptions: {
packedbubble: {
minSize: '1%',
maxSize: '100%',
zMin: 1,
zMax: 400,
layoutAlgorithm: {
enableSimulation: false,
gravitationalConstant: 0.05,
splitSeries: true,
seriesInteraction: false,
dragBetweenSeries: false,
parentNodeLimit: true
}
},
legend: {
enabled: false
}
},
series: [{
name: 'Test',
data: [{
name: "Lorem",
value: 29.4,
color: 'red'
},
{
name: "Ipsum",
value: 34.1,
color: 'blue'
},
{
name: "Dolor",
value: 7.1,
color: 'green'
}],
}, {
name: 'Test 2',
data: [{
name: 'Lorem',
value: 300.1,
color: 'red'
},
{
name: 'Ipsum',
value: 20.7,
color: 'blue'
},
{
name: "Dolor",
value: 97.2,
color: 'green'
}],
}, {
name: 'Test 3',
data: [{
name: "Lorem",
value: 8.2,
color: 'red'
},
{
name: "Ipsum",
value: 9.2,
color: 'blue'
},
{
name: "Dolor",
value: 13.1,
color: 'green'
}],
}]
});
Is this possible? Also, if this is possible, how can I remove the name from the tooltip?

You can add the labels by using annotations or Highcharts.SVGRenderer class.
To remove the series name from tooltip set:
tooltip: {
headerFormat: '',
...
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4771/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
https://api.highcharts.com/highcharts/annotations
https://api.highcharts.com/highcharts/tooltip.headerFormat

Highcharts: Add multiple colors to area line chart

I am trying to create a chart like this one:
:
I have already achieved all of the features except the multi colored line of the area chart. I want to show the different gradients of the chart in different colors, thus I need multiple colors on the line.
I have already tested zones like shown here and also common plugins like this. Both do not work. The zones are applied to the area which I do not want and the plugin can only color lines OR areas but not only lines in area charts.
My current Highcharts settings look like this:
{
title: {
text: null
},
xAxis: {
crosshair: true,
labels: {
format: '{value} km'
},
title: {
text: null
},
opposite: true,
startOnTick: true,
endOnTick: false,
min: 0
},
yAxis: {
startOnTick: true,
showFirstLabel: false,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
min: 100,
labels: {
format: '{value} m'
}
},
plotOptions: {
dataGrouping: {
enabled: false
},
showInNavigator: true,
stacking: 'normal',
series: {
dragDrop: {
draggableY: true
},
point: {
events: {
mouseOver: (e) => {
this.chartHover.emit({
distance: e.target.x * 1000
});
},
}
},
},
area: {
dragDrop: {
draggableY: true,
dragPrecisionY: 1
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
chart: {
update: true,
styledMode: true,
marginBottom: 0,
marginRight: 0
},
tooltip: {
headerFormat: '',
pointFormatter: function () {
let point = this;
if (!this.series) {
return;
}
return '<span class="tooltip-area-series-' + this.series.index + '">\u25CF</span> ' + point.series.name + ': <b>' + point.y + 'm</b><br/>';
},
shared: true
},
series: [],
};
Is there an built-in solution for this?
EDIT:
I used the proposed solution by ppotaczek:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
This works pretty good, but has some performance pitfalls when you try to add approx. more than 150 zones on desktop browsers.
There is also a small rendering issue - small gaps between the zones.
Best,
Philipp

You can add an extra spline series with zones:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/8er6y4u3/
API: https://api.highcharts.com/highcharts/series.spline.zones

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/