Develop Reference

Highcharts grouping column, hide in tooltip

I'm using grouping column in highcharts, I need to show only usage columns in tooltip(shared: true). But I see all grouping column http://jsfiddle.net/8o6umxdp/, I want to see only the values of the columns in this field, not grouped. I'm hiding this legend "showInLegend: false" but this legend is showing in the tooltip.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
grouping: true
}
},
series: [ {
name: 'Tokyo',
data: [0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0],
grouping: 'tok',
showInLegend: false
}, {
name: 'Tokyo',
data: [1, 0, 3, 0, 4, 0, 0, 0, 0, 0, 0, 0]
}, {
name: 'New York',
data: [0, 0, 0, 0, 33, 0, 0, 0, 0, 0, 0, 0],
grouping: 'mew',
showInLegend: false
}, {
name: 'New York',
data: [80, 0, 0, 42, 23, 0, 0, 0, 0, 0, 0, 0],
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
but here only berlin and london, how to hide tokyo and new york

You could replace your pointFormat with a pointFormatter and filter by Series.showInLegend.
For example (JSFiddle):
// ...
tooltip: {
pointFormatter: function() {
if(this.series.options.showInLegend !== false)
return '<tr><td style="color:'+this.series.color+';padding:0">'+this.series.name+': </td><td style="padding:0"><b>'+this.y.toFixed(1)+' mm</b></td></tr>';
}
}
This should mimic your pointFormat style, but allow for more dynamic inclusion.

Highcharts time series combo graph where few months data is null

I am trying to develop a multi axis combo graph using highcharts api with months in x-axis and multiple y axis with 2 axes having percentages and 1 having number. This is similar to what you see in this link. This works fine when you have the y axes data for all 12 months. In some cases y axes data for few months are missing. In that case I still want to show the month in the x axis with no data. Currently if I have y axes data for only 2 months (say June and December), it would show as the data for Jan and Feb instead. Please find the code which I'm using and let me know what can be the resolution for this.
var chartMonthlyData = {
title: {
text: ''
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{
min: 0,
max: 50,
labels: {
format: '{value} %'
},
title: {
enabled: false
},
opposite: true
}, {
title: {
text: '',
},
labels: {
formatter: function () {
return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
}
}, {
min: 0,
max: 50,
title: {
enabled : false
},
labels: {
enabled: false
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
align: 'right',
x: -30,
verticalAlign: 'top',
y: -5,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
color: '#C8102E',
name: 'Delivered',
type: 'column',
yAxis: 1,
data: deliveredMonthly,
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>'
+ '{point.y}' +'</b><br/>'
}
}, {
color: '#AAAAAA',
name: 'Open Rate',
type: 'line',
yAxis: 2,
data: openRateMonthly,
lineWidth: 4,
marker: {
enabled: true,
"symbol": "circle"
},
tooltip: {
valueSuffix: ' %'
}
}, {
color: '#5891c8',
name: 'Clickthrough Rate',
type: 'line',
data: clickThroughRateMonthly,
lineWidth: 4,
marker: {
enabled: true,
"symbol": "circle"
},
tooltip: {
valueSuffix: ' %'
}
}]
}
In this image, actual months in x axis are January, June and August. I need the 12 months to be shown in the graph with the y axes data properly tied with months.

Get proper data from server side or update the data before providing to highcharts
data: [49.9, 71.5, 106.4, null, null, null, null, null,null, null, null, null],
add or substitute null to data series with no values corresponding to month in order to have series length same as categories
Fiddle demo

Simply add max parameter inside xAxis object.
API Reference:
http://api.highcharts.com/highcharts/xAxis.max
Example:
http://jsfiddle.net/xkqn4qq7/

There are multiple ways to format your data such that the gaps show up. You can use a 2 dimensional array:
var deliveredMonthly =[[0,4],[5,5],[7,2]],
You can use an array of objects, setting the x & y:
openRateMonthly = [{x:0,y:22},{x:5,y:5},{x:7,y:3}],
And, you can populate a one dimensional array with nulls for your missing data points.
clickThroughRateMonthly = [10,null,null,null,null,12,null,null,50];
In order to guarantee you have all 12 months, you should set the min and max on the xAxis
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
crosshair: true,
min:0,
max:11
}],
http://jsfiddle.net/v159gw36/2/

realign Labels inside and outside the bar chart on highcharts

I am facing dificulties to make realign labels inside and outside the bar if value is < 0.35 of max. The labels simply dont appears to lower values. My Fiddle: http://jsfiddle.net/Yrygy/527/
My Code:
var GlobalRotation = -90;
var GlobalAlign = 'right';
var X;
var Y;
function realignLabels(serie) {
$.each(serie.points, function (j, point) {
if (!point.dataLabel) return true;
var max = serie.yAxis.max,
labely = point.dataLabel.attr('y')
if (point.y / max < 0.35) {
point.dataLabel.attr({
y: labely - 120,
});
}
});
};
$(function() {
Highcharts.Series.prototype.drawDataLabels = (function(func) {
return function() {
func.apply(this, arguments);
if ((this.options.dataLabels.enabled || this._hasPointLabels) && this.chart.options.chart.realignLabels) {
realignLabels(this);
}
};
}(Highcharts.Series.prototype.drawDataLabels));
$('#container').highcharts({
chart: {
type: 'line',
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold'
},
formatter: function() {
var max = this.series.yAxis.max,
color = 'black';
return '<span style="color: ' + color + '">' + this.y + ' </span>';
},
verticalAlign: "top",
}
}
},
series: [{
data: [69.9, 71.5, 76.4, 69.2, 74.0, 176.0, 75.6, 48.5, 316.4, 94.1, 95.6, 2.33]
}]
});
$('#container2').highcharts({
chart: {
type: 'column',
realignLabels: true,
animation: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:,.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
animation: true,
pointPadding: 0.05, // Defaults to 0.1
groupPadding: 0.05, // Defaults to 0.2
dataLabels: {
enabled: true,
rotation: GlobalRotation,
color: '#FFFFFF',
align: GlobalAlign,
verticalAlign: "top",
y: 10,
inside: false,
style: {
fontSize: '12px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
}
},
},
series: [
{
name: 'Serie 2',
data: [120, 125, 130, 140, 120, 120, 130, 125, 130, 125, 120, 130]},
{
name: 'Serie 1',
data: [116, 120, 125, 136, 115, 114, 125, 119, 125, 120, 114, 25]},
{
name: 'Serie 1',
data: [4, 5, 5, 4, 5, 6, 5, 6, 5, 5, 6, 115]}
]
});
});
The data appear inside the column as I desired, but i dont know how to show the lower values.

Your labels are moved out of the view (dataLabel.attr('y') == -9999). This is caused by crop option. Disable that option, and labels will show up:
plotOptions: {
column: {
animation: true,
pointPadding: 0.05, // Defaults to 0.1
groupPadding: 0.05, // Defaults to 0.2
dataLabels: {
enabled: true,
rotation: GlobalRotation,
color: '#FFFFFF',
align: GlobalAlign,
verticalAlign: "top",
y: 10,
inside: false,
crop: false, // disabled crop
style: {
fontSize: '12px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
}
},
}
Demo: http://jsfiddle.net/Yrygy/530/

Highcharts won't draw line when series values are all 0

Highcharts won't connect points in a line chart series if all the values in the array are 0 when a gradient is used.
Sample Code:
http://jsfiddle.net/p2EYM/20/
This seems to be related to the now closed issue found here. Does anyone know if there is there a workaround for this?
var colors = ['#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'];
var applyGradient = function(color) {
return { radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')]
]
};
};
//works if you comment this out.
colors = $.map(colors, applyGradient);
$('#container').highcharts({
colors: colors,
title: {
text: 'Points with zero value are not connected by line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May',
'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
offset: 0,
},
plotOptions: {
series: {
connectNulls: true
}
},
yAxis: {
min: 0,
},
series: [{ data: [2, 10, 40, 40, 40, 40, 40, 40, 40, 40, 30, 20] },
{ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
]
});

If you move the "colors = $.map(colors, applyGradient);" line to after you call highcharts it should work.
//works if you comment this out.
colors = $.map(colors, applyGradient);
Updated example: http://jsfiddle.net/jQQF5/

This is 'bug' for Highcharts, and in general for SVG, see this.

Highcharts highlight single point on line

I am using Highcharts to draw a line graph.
When the page loads, the line graph is drawn. Please note, that i got an y-Value for every x-Value starting from 0 till 700 ( 0,1,2,3,...,700). This is how i create the graph:
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false,
type: 'line',
marginTop: null,
marginRight: 55,
marginBottom: 50,
marginLeft: 80,
backgroundColor: backgroundColor,
spacingTop: 10,
spacingRight: 10,
spacingBottom: 15,
spacingLeft: 10,
},
title: {
text: ' Graph',
style: {color: graphLabelColor},
x: -20 //center
},
xAxis: {
title: {
text: 'xAXIS',
style: {
color: axisLabelColor
},
},
min:0,
max: 600,
gridLineColor: gridLineColor,
minorTickInterval: 50,
minorTickLength: 1,
tickInterval: 100,
minorGridLineWidth: 0,
gridLineWidth: 1,
lineColor: axisColor,
labels: {
style : {
color: axisColor
}
},
plotLines: [{
value: 0,
width: 0,
color: axisColor
}]
},
yAxis: {
title: {
text: 'yAxis',
style: {color:
axisLabelColor
},
},
min:0,
max: 700,
gridLineColor: gridLineColor,
lineColor: axisColor,
minorTickInterval: 50,
minorTickLength: 1,
minorGridLineWidth: 0,
tickInterval: 100,
labels: {
style: {
color: axisColor
}
},
plotLines: [{
value: 0,
width: 0,
color: axisColor
}]
},
exporting: {
enabled: false
},
tooltip: {
enabled: true,
borderColor: crosshairColor,
crosshairs: [{
width: 1,
color: crosshairColor,
},
{
width: 1,
color: crosshairColor,
}],
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+this.y +' & '+ this.x.toFixed(0);
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1,
borderColor: plotlineColor,
enabled: false,
floating: true,
shadow: true
},
plotOptions: {
series: {
enableMouseTracking: true
},
line: {
color:plotlineColor,
},
},
series: [{
lineWidth: 2,
name: carname,
data: dataArray,
marker: {
color:crosshairColor,
radius: 1
}
}]
});
In my HTML-Page I got two buttons to increase/decrease (+1/-1) a number in a textfield, starting at 200. The number represents a x-Coordinate in the graph.
I would like to highlight the shown number of my textfield in the graph with another color and a bigger point when the graph is loaded the first time and also when the user changes the number using one of these buttons. How can I do this?
I tried
chart.series[0].options.data[valueOfTextfield].color = 'yellow';
chart.redraw(true);
in the onclick method of the buttons but it doesnt work.
Thanks for your answers!

Using a marker we can do this:
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, { marker: {
fillColor: '#FF0000',
lineWidth: 3,
lineColor: "#FF0000" // inherit from series
},y:71.5}, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
http://jsfiddle.net/zR4Kn/

use the select method of the point object
https://api.highcharts.com/highcharts/series.line.point.events.select