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
javascript highcharts
add a comment |
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
javascript highcharts
add a comment |
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
javascript highcharts
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
javascript highcharts
javascript highcharts
edited Nov 12 at 0:01
Halvor Strand
14.7k145373
14.7k145373
asked Nov 11 at 20:49
Vladimir Lenkov
334
334
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253094%2fhighcharts-grouping-column-hide-in-tooltip%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
add a comment |
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.
add a comment |
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.
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.
answered Nov 11 at 23:59
Halvor Strand
14.7k145373
14.7k145373
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253094%2fhighcharts-grouping-column-hide-in-tooltip%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown