Develop Reference

Highcharts - Format overlapping scatter points in a shared tooltip

I have a scatter chart in which there are some points in different series which overlap at exact points.
The x,y for both of these points in different series are same.
So I need to show both of them at the same time in tooltip.
However, the shared option only works when I'm not formatting the tooltip.
It doesn't work when I use pointFormat.
I tried to use formatter, but this just gives current point.
If I switch the chart to line chart, this gives points, which has all the points in the current position. With that, I can iterate and do the formatting.
Chart options:
{
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
borderWidth: 1
}, tooltip: {
formatter: function () {
console.log(this);
return this.points.reduce(function (s, point) {
return s + '<br/>' + point.series.name + ': ' +
point.point.options.dynamicText;
}, '<b>' + this.x + '</b>');
},
crosshairs:true,
shared: true
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [{x:161.2, y:51.6, dynamicText:"foo1"}]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [{x:161.2, y:51.6, dynamicText:"foo2"}]
}]
}
https://jsfiddle.net/dushyantbangal/ojqde34x/17/

Shared tooltip does not work with scatter series - please check this issue: https://github.com/highcharts/highcharts/issues/1431
The simplest solution is to use line series type with lineWidth property set to 0:
plotOptions: {
series: {
lineWidth: 0,
states: {
hover: {
lineWidthPlus: 0
}
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/3fda1nm4/
API Reference: https://api.highcharts.com/highcharts/series.line.lineWidth

High chart (spark line) displaying "Created with High charts 4.0.1 No data to display" instead of display graph?

High chart (spark line) displaying Created with High charts 4.0.1 No data to display instead of display graph?
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
min: 0,
title: {
text: ''
},
categories: ['a','b','c']
},
yAxis: [{
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
labels:
{
enabled: false
}
},
{
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
labels:
{
enabled: false
}
}],
series: [{
name: ' ',
yAxis: 1,
type: 'spline',
data: [1,2,3],
pointStart: 0
},
{
name: ' ',
yAxis: 1,
type: 'spline',
data: [4,5,6],
pointStart: 0
}],
legend: {
enabled: false,
width: 100,
floating: true,
align: 'left',
x: 0, // = marginLeft - default spacingLeft
itemWidth: 60
},
chart: {
height: 30,
width: 100,
marginBottom: 10
},
tooltip: {
positioner: function () {
return { x: -180, y: -25 };
},
shape: "square",
backgroundColor: '#FCE9CE',
borderWidth: 1,
borderColor: '#F90',
formatter: function () {
var bpValue = [];
var serviceDate;
$.each(this.points, function (i, point) {
bpValue.push('<span>' + point.y + '</span>');
serviceDate = point.x;
});
var content = "<span><b>Service:</b>" + serviceDate
+ "</span><br /><span><b>BP Value :</b></span>";
bpValue = bpValue.join('/');
return content + bpValue;
},
shared: true
}
Sometimes It is not displaying any line or dot. instead of that simply showing alternate text that is Created with Highcharts 4.0.1. What would be the issue? how can resolve this?

Set height of y-axis ticks in highcharts

since I need to add a description text to some of my y-axis titles I need to set the height of the ticks in a highcharts bar chart. Does anyone know how to get this working? Is there perhaps an automatic height calculation possible?
new Highcharts.Chart({
credits: { enabled: false },
chart: {
renderTo: 'parameterAnalysisChart{0}'.format(chartCount),
type: 'bar',
height: parameters.length * categories.length * 20 + (parameters.length + 1) * 40,
spacingRight: 20
},
title: { text: i18n.t('misc.valueCategory_plural') },
xAxis: {
categories: xAxis
},
yAxis: {
min: 0,
title: { text: null },
labels: { overflow: 'justify' },
allowDecimals: false
},
tooltip: { enabled: false },
legend: { enabled: false },
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<strong>'+ this.series.name +':</strong> ' + this.y;
}
}
},
series: {
minPointLength: 5,
stickyTracking: false
}
},
series: series
});

HighChart Stacked Column label issue

I have a chart with values that are uneven, ie: First value is 1315 and second value is 1, and so on, and when displaying the chart the labels are being overlapped. I have already searched in multiple forums but no one had the exact same problem. Here's a fiddle to see the problem: http://jsfiddle.net/6LutjLc3/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Issue']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [1235]
}, {
name: 'Toto',
data: [2]
}, {
name: 'Matt',
data: [1]
}, {
name: 'Jane',
data: [72]
}, {
name: 'Joe',
data: [3]
}]
});
});
What I need to code is to give the value 1 one box where the label fits in as like any other example in highchart.
Thanks in advance for your help!

If your client demands use of this style of graph you can get better looking results by modifying your dataLabel settings. Setting overflow to false and adding a formatter function that only returns a value if it's let's say at least 7% (or whatever percentage works best for you) of the current total will help. See the following:
dataLabels: {
enabled: true,
overflow: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
},
formatter: function () {
if (this.percentage >= 7) return this.y;
}
}
Fiddle here: http://jsfiddle.net/6LutjLc3/4/

Highcharts AreaSpline - Adding padding in between the chart and plot area

I am trying to add padding in between my chart and plot area, as you can see in the screenshot below, the markers are overflowing across the borders of the plot area.
Is there a way for me to add padding to the bottom of the plot area, or a way to move up the chart series slightly so that it doesn't overflow?
Here is a fiddle: http://jsfiddle.net/H3Asy/5/
Here is the JS code:
$('#container').highcharts({
chart: {
type: 'areaspline',
marginLeft: 25,
plotBorderWidth: 2,
plotBackgroundColor: {
linearGradient: [0, 0, 0, 178],
stops: [
[0.5, 'rgb(255, 255, 255)'],
[1, 'rgb(221, 221, 221)']
]
},
events: {
load: function(){
this.plotBackground.attr({ rx: 15, ry: 15 });
this.plotBorder.attr({ rx: 15, ry: 15 });
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
labels: {
rotation: -90,
align: 'right',
style: {
fontSize: '12px',
fontWeight: 'bold',
fontFamily: 'Sterling, sans-serif',
color: '#999'
},
x: 5,
y: 28
}
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function() {
if(this.isFirst) {
return this.value;
}
return bytesToSize(this.value, 0, true);
},
style: {
fontSize: '12px',
fontWeight: 'bold',
fontFamily: 'Sterling, sans-serif',
color: '#999'
},
align: 'center',
x: -16,
y: 12
},
gridLineColor: 'transparent'
},
tooltip: {
shared: true,
formatter: function() {
var tooltip = $('<div>');
var total = 0;
$.each(this.points, function(i, point){
total += this.y;
tooltip.append($('<div style="color: ' + point.series.area.fill + ';">').html(point.series.name + ': ' + bytesToSize(this.y,2)));
if(!(i % 2)){
tooltip.append('<br />');
}
});
tooltip.prepend($('<div style="color: #999;">').html('Total: ' + bytesToSize(total,2) + '<br />'));
return tooltip.get(0).outerHTML;
}
},
plotOptions: {
areaspline: {
lineWidth: 1.3,
marker: {
states: {
hover: {
radius: 5
}
}
},
states: {
hover: {
lineWidth: 1.3
}
}
}
},
series: [{
name: 'Download',
fillColor: 'rgba(0, 140, 194, 0.3)',
lineColor: '#008cc2',
data: [0,4815834355,23055591595,0,0,15404821463,0,20217522975,5521887522,0,0,1371666239,2134496,0,2948406184,12384283037,8231543133,9268703354,11368292543,1747717890,4540649201,4705338812]
}, {
name: 'Upload',
fillColor: 'rgba(117, 0, 198, 0.4)',
lineColor: '#7500c6',
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
data: [0,201112067,1160271286,0,0,748962337,0,2289905587,211355292,0,0,64669389,559747,0,368939264,954704437,385646325,453112460,251406236,131414580,312915384,153890742]
}]
});

There is no perfect solution for that, but only two workarounds:
set min and startOnTick for xAxis, demo: http://jsfiddle.net/H3Asy/6/
yAxis: {
min: -1024 * 1024 * 1024,
startOnTick: false,
}
set threshold for series and startOnTick for xAxis, demo: http://jsfiddle.net/H3Asy/7/
yAxis: {
startOnTick: false
},
plotOptions: {
areaspline: {
threshold: -1
}
}