Develop Reference

Highcharts Line Chart populating without data lines

This chart worked for years with no issue and a few days ago I noticed the lines are not populating. Cannot find a fix here or on highcharts forums. Typically, when something is wrong with the javascript, nothing populates but in this case, everything populates but the lines and associated data.
Thank you in advance!
JSFiddle: https://jsfiddle.net/jstark/zf3ma5so/2/
$(function () {
$('#container101').highcharts({
chart: {
type: 'line',
spacingBottom: 5,
spacingTop: 15,
spacingLeft: 35,
spacingRight: 35
},
title: {
text: 'Graduation Diploma Types Awarded by Year',
style: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "24px", "fontWeight":"bold"}
},
xAxis: {
categories: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],
crosshair: true
},
yAxis: {
min: '40',
max: '60',
title: {
text: 'Percentage Awarded',
style: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "16px", "fontWeight":"bold"},
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '%',
borderColor: 'gray',
borderRadius: 10,
shadow: false
},
credits: {
enabled: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0,
itemMarginBottom: 20,
itemStyle: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "16px", "fontWeight":"bold"}
},
series: [{
name: 'Advanced/CCR/Honors Diploma',
color: '#01a2d7',
data: [46, 45, 48, 49, 50, 50, 52, 47, 49, 49, 50, 49],
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: '#01a2d7'
}
}, {
name: 'Standard Diploma',
color: '#01519c',
data: [51, 52, 51, 50, 50, 50, 48, 53, 51, 51, 50, 51],
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: '#01519c'
}
}]
});
});

The min/max properties on yAxis should be numbers instead of strings.
min: 40,
max: 60,
instead of
min: '40',
max: '60',

Bubble chart (relations between bubbles)

Please can you tell me, is it possible to create relations between bubbles (lines from one bubble to other(s))?
Example:
SE->FL->NL
FL->DE
SE->BE->DE
DE->NL
Demo:
http://jsfiddle.net/2pLog7fw/

Sure, it can be done. One way of creating lines is to set lineWidth to be higher than zero for bubble series.
Live demo: http://jsfiddle.net/kkulig/2d7u7orx/
But this only creates one relation within a series (from the first point to the last one).
The solution here is to create a new scatter series for every relation:
{
data: [
[80.3, 86.1],
[80.8, 91.5],
[80.4, 102.5]
], // SE -> FI -> NL
type: 'scatter'
}, {
data: [
[86.5, 102.9],
[80.4, 102.5]
], // DE -> NL
type: 'scatter'
}
Configuration for all scatter series (plotOptions):
scatter: {
lineWidth: 1, // show the line
marker: {
radius: 0
}
}
Live demo: http://jsfiddle.net/kkulig/x8r6uj5q/
If you want an arrow that shows the direction of the relation you can use the code from this demo: http://jsfiddle.net/kkulig/mLsbzgnp/

This is right answer for my question:
"You can use scatter series to connect bubbles"
https://github.com/highcharts/highcharts/issues/7410
Example
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
x: 95,
y: 95,
z: 15.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 16,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 16,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 18.8,
name: 'SE',
country: 'Sweden'
}]
}, {
type: 'scatter',
lineWidth: 1,
enableMouseTracking: false,
data: [
[95, 95], [86.5, 102.9],
[86.5, null],
[86.5, 102.9], [80.4, 102.5],
[86.5, null],
[86.5, 102.9], [80.3, 86.1]
]
}]
});
Live demo: http://jsfiddle.net/2pLog7fw/1/

x-axis symbols on Data scroll in Echarts not scrolling correctly.

I am making a simple bar graph using echarts js with symbols on x Axis. I am also trying to do datascroll for the xAxis, but when I am scrolling the symbol positions are not changing with the scroll. I go through the API doc of echarts but found nothing.
I am trying this JsFiddle
var advertLineChart = document.getElementById('advertLineChart');
var myAdvertLineChart = echarts.init(advertLineChart);
createAdvertLineChart();
function createAdvertLineChart() {
var option = {
title: {
x: 'center',
text: 'ECharts例子个数统计',
subtext: 'Rainbow bar example',
link: 'http://echarts.baidu.com/doc/example.html'
},
tooltip: {
trigger: 'item'
},
toolbox: {
show: true,
orient: 'vertical',
y: 'center',
itemSize: 12,
feature: {
mark: {
show: true,
title: {
mark: 'Create line mark',
markUndo: 'Undo line mark',
markClear: 'Clear all line Marks'
},
lineStyle: {
width: 2,
color: '#1e90ff',
type: 'dashed'
}
},
dataZoom: {
show: true,
title: {
dataZoom: 'Data Zoom',
dataZoomReset: 'Data zoom reset'
}
},
dataView: {
show: true,
title: 'Show Data',
readOnly: false,
lang: ['Data View', 'Close', 'Refresh']
},
magicType: {
show: true,
type: ['line', 'bar'],
title: {
line: 'Line View',
bar: 'Bar View'
}
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Save as Image',
lang: ['Click Save']
}
}
},
dataZoom: {
show: true,
realtime: true,
showDetail: true,
//orient: 'vertical', // 'horizontal'
//x: 0,
y: 36,
//width: 400,
height: 20,
//backgroundColor: 'rgba(221,160,221,0.5)',
//dataBackgroundColor: 'rgba(138,43,226,0.5)',
//fillerColor: 'rgba(38,143,26,0.6)',
//handleColor: 'rgba(128,43,16,0.8)',
//xAxisIndex:[],
//yAxisIndex:[],
start: 40,
end: 70,
zoomLock: true
},
calculable: true,
grid: {
borderWidth: 0,
y: 80,
y2: 60
},
xAxis: [{
type: 'category',
show: false,
data: ['Line', 'Bar', 'Scatter', 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel', 'Line1', 'Bar1', 'Scatter1', 'K1', 'Pie1', 'Radar1', 'Chord1', 'Force1', 'Map1', 'Gauge1', 'Funnel1', 'Funnel2', 'Line2', ]
}],
yAxis: [{
type: 'value',
show: false
}],
series: [{
name: 'ECharts例子个数统计',
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
data: [12, 21, 10, 4, 12, 5, 6, 5, 25, 23, 7, 12, 21, 10, 4, 12, 5, 6, 5, 25, 23, 7, 20, 100],
markPoint: {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0)',
formatter: function(params) {
return '<img src="' + params.data.symbol.replace('image://', '') + '"/>';
}
},
data: [{
xAxis: 0,
y: 320,
name: 'Line',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/21af6834-2b44-4217-9516-3b2add06114c.png'
}, {
xAxis: 1,
y: 320,
name: 'Bar',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/5268c2b2-0b1f-4373-b235-7f71b6bb4290.png'
}, {
xAxis: 2,
y: 320,
name: 'Scatter',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/69a7df86-0bf6-4cea-a6b6-881a4052ec20.png'
}, {
xAxis: 3,
y: 320,
name: 'K',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/de874b8f-f8df-4905-9650-8efa8f19c015.png'
}, {
xAxis: 4,
y: 320,
name: 'Pie',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/b83f4915-8587-4df5-bde6-308ec0f472b3.png'
}, {
xAxis: 5,
y: 320,
name: 'Radar',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/db739705-c9e3-47bd-a3de-7e757ce0c434.png'
}, {
xAxis: 6,
y: 320,
name: 'Chord',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/131201d2-9154-4391-89e7-73d83c12d33c.png'
}, {
xAxis: 7,
y: 320,
name: 'Force',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/158dd833-a788-4e83-a7fd-ba42addaae31.png'
}, {
xAxis: 8,
y: 320,
name: 'Map',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/b6933882-f367-419e-8f6e-df65ae74a859.png '
}, {
xAxis: 9,
y: 320,
name: 'Gauge',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/bae5221a-02e7-407a-8fa3-36bb8456dafa.png'
}, {
xAxis: 10,
y: 320,
name: 'Funnel',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 11,
y: 320,
name: 'Line1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 12,
y: 320,
name: 'Bar1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 13,
y: 320,
name: 'Scatter1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 14,
y: 320,
name: 'K1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 15,
y: 320,
name: 'Pie1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 16,
y: 320,
name: 'Radar1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 17,
y: 320,
name: 'Chord1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 18,
y: 320,
name: 'Force1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 19,
y: 320,
name: 'Map1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 20,
y: 320,
name: 'Gauge1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 21,
y: 320,
name: 'Funnel1',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/69a7df86-0bf6-4cea-a6b6-881a4052ec20.png'
}, {
xAxis: 22,
y: 320,
name: 'Funnel2',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/5268c2b2-0b1f-4373-b235-7f71b6bb4290.png'
}, {
xAxis: 23,
y: 320,
name: 'Line2',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/21af6834-2b44-4217-9516-3b2add06114c.png'
}, ]
}
}]
};
myAdvertLineChart.setOption(option);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
<div id="advertLineChart" style="width: 100%; height: 350px;"></div>
How to scroll the images correctly when scrolling the slider? Thanks in advance.

How to make the full million value show up on y-axis and tooltip (Highcharts)

I have been messing with this for a while now and have no clue why nothing will take when I try to format this data set for millions. Any insight please let me know, might just be that I am not seeing a really simple part. I went through the Highcharts docs and nothing I tried with formatter or anything else worked. So i stripped out my edits and added the code below as it was before I changed it.
Here is the fiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Industry $',
style: {
fontWeight: 'bold'
}
},
subtitle: {
text: 'By Year',
style: {
fontWeight: 'bold'
}
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Open Sans, sans-serif',
fontWeight: 'bold'
}
}
},
yAxis: {
min: 0,
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
},
rotation: 0,
style: {
fontWeight: 'bold'
}
},
title: {
text: 'Total $',
style: {
fontWeight: 'bold'
}
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Total $: <b>{point.y}</b>',
},
series: [{
name: 'Population',
data: [
['2005', 25,000],
['2006', 50,000],
['2007', 75,000],
['2008', 98,000],
['2009', 200,000],
['2010', 600,000],
['2011', 800,000],
['2012', 1,000,000]
],
dataLabels: {
enabled: true,
tooltip: {
valueSuffix: ''
},
rotation: 0,
color: '#FFFFFF',
align: 'center',
format: '{point.y}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});

Take the commas out
e.g.
data: [
['2005', 25,000],
['2006', 50,000],
['2007', 75,000],
['2008', 98,000],
['2009', 200,000],
['2010', 600,000],
['2011', 800,000],
['2012', 1,000,000]
],
should be:
data: [
['2005', 25000],
['2006', 50000],
['2007', 75000],
['2008', 98000],
['2009', 200000],
['2010', 600000],
['2011', 800000],
['2012', 1000000]
],

*Highcharts* Get rid of the color in the percentage area chart

I have a percentage area chart like this: http://www.highcharts.com/demo/area-stacked-percent and want to ask that are there any ways to get rid of the area's color ? so that we have only the lines and the white background ?

I guess this is what you're looking for:
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:#ffffff">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
shared: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

You can use fillColor inside plotOptions --> area something like below.
plotOptions: {
area: {
fillColor: 'rgba(0, 0, 0, 0)',
stacking: 'percent',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
},
}
The working fiddle can be found here.
For demonstration i have used the same example as high chart.

$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
shared: true
},
plotOptions: {
area: {
color: 'white',
stacking: 'percent',
lineColor: 'black',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: 'black'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
the only problem is that line color will be same.