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:

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

Echarts how do you add dashed vertical line in between specific bars on bar chart?

I am working with Echarts and created a bar chart. I am trying to add two vertical dashed lines to separate Source3 and Source4 and another dashed vertical line to show separation of SourceSix and SourceSeven. I have tried messing around with markLine to a bar and adding a line as part of the data after a bar but I can seem to figure this out.
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- including ECharts file -->
<script src="echarts.js"></script>
</head>
<body>
<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 1600px;height:800px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'Counts by Intel Source'
},
legend: {
data:['Count']
},
xAxis: {
type: 'category',
data: ['SourceOne','SourceTwo','SourceThree','SourceFour','SourceFive','SourceSix','SourceSeven','SourceEight'],
axisLabel: {
fontWeight: 'bold',
fontSize: 16,
margin: 1,
}
},
yAxis: {
type: 'log',
axisLabel: {
fontWeight: 'bold',
}
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
series: [
{
name: 'SourceOne',
type: 'bar',
stack: 'Chart 1',
color: '#ed2d2e',
data: [1819931,,,,,,,],
},
{
name: 'SourceTwo',
type: 'bar',
stack: 'Chart 1',
color: '#0bb5b5',
data: [,1291396,,,,,,]
},
{
name: 'SourceThree',
type: 'bar',
stack: 'Chart 1',
color: '#662c91',
data: [,,161,,,,,]
},
{
name: 'SourceFour',
type: 'bar',
stack: 'Chart 1',
color: '#0e107b',
data: [,,,133279,,,,]
},
{
name: 'SourceFive',
type: 'bar',
stack: 'Chart 1',
color: '#a11d20',
data: [,,,,1275,,,]
},
{
name: 'SourceSix',
type: 'bar',
stack: 'Chart 1',
color: '#f37d22',
data: [,,,,,119,,]
},
{
name: 'SourceSeven',
type: 'bar',
stack: 'Chart 1',
color: '#008c47',
data: [,,,,,,25224,]
},
{
name: 'SourceEight',
type: 'bar',
stack: 'Chart 1',
color: '#1859a9',
data: [,,,,,,,6798]
},
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
Desired output:

I've managed to achieve a similar effect to what you're looking for using the following option: I've converted your x-axis to be a 'value' x-axis, so that we can put markerLines at specific places in between your series. In doing so, you need to assign an x-axis index to each of your data points, but it also allows you to add an additional point to sourceThree and sourceSix which would let you draw a line in between the two as a type:'average' markLine:
option = {
title : {
text: 'Chart Title',
subtext: 'subtitle'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
formatter : function (params) {
return params.seriesName + ' : [ '
+ params.value[0] + ', '
+ params.value[1] + ' ]';
}
},
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'log',
axisLine: {
lineStyle: {
color: '#dc143c'
}
}
}
],
series : [
{
name:' SourceOne',
type:'bar',
data:[
[1, 1819931]
]
},
{
name:' SourceTwo',
type:'bar',
data:[
[2, 1291396]
]
},
{
name:' SourceThree',
type:'bar',
data:[
[3, 161], [4, 0]
],
markLine : {
silent: true, // ignore mouse events
data : [
// Horizontal Axis (requires valueIndex = 0)
{type : 'average', name: 'Marker Line', valueIndex: 0, itemStyle:{normal:{color:'#1e90ff'}}},
]
}
},
{
name:' SourceFour',
type:'bar',
data:[
[4, 133279]
]
},
{
name:' SourceFive',
type:'bar',
data:[
[5, 1275]
]
},
{
name:' SourceSix',
type:'bar',
data:[
[6, 119], [7, 0] // this extra data point is the hack to get your marker line in between your series
],
markLine : {
silent: true, // ignore mouse events
label: {show: false},
data : [
// Horizontal Axis (requires valueIndex = 0)
{type: 'average', name: 'Line Marker', valueIndex: 0},
]
}
},
{
name:' SourceSeven',
type:'bar',
data:[
[7, 25224]
]
},
{
name:' SourceEight',
type:'bar',
data:[
[8, 6798]
]
}
]
};
This should result in the following chart, and you can try it yourself by pasting that option here:
https://echarts.baidu.com/echarts2/doc/example/bar13.html#

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);