I have a Highchart containing multiple lines. I want to disable the tooltip on certain lines, and leave it enabled for others. Is that possible? I see how to disable the tooltip globally, but not by series.
For instance, on the standard line chart example is it possible to disable the tooltip on the red and blue lines but leave it enabled on the other two?
UPDATE
use enableMouseTracking: Boolean
Notice enableMouseTracking: Boolean was introduced after this question was asked
Old Answer
I just Disabled the heights point in the Tokyo series
here is your code
tooltip: {
formatter: function() {
if(this.series.name == 'Tokyo' && this.y == 26.5 ){
return false ;
// to disable the tooltip at a point return false
}else {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
}
}
jsfiddle
Use enableMouseTracking. It's the best way to do it.
Per Serie
series: [{
name: 'Serie1',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
enableMouseTracking: false
}, {
name: 'Serie2',
data: [7.0, 6.9, 9.5, 15.5, 15.2, 15.5, 15.2, 15.5, 11.3, 17.3, 11.9, 9.6]
}]
Global
plotOptions: {
series: {
enableMouseTracking: false
}
}
The code above will display tooltip for only the first serie.
Reference: enableMouseTracking
For stock charts enableMouseTracking: false makes lines inactive on hover.
Here's better solution:
Highcharts.chart('container', {
series: [{
name: 'John',
type: 'column',
data: [5, 3, 4, 7, 2],
tooltip: {
pointFormatter: function() {
return false
}
}
}, {
name: 'Jane',
type: 'column',
data: [2, 2, 3, 2, 1],
tooltip: {
pointFormatter: function() {
return 'Second <strong>column</strong> series.'
}
}
}, {
name: 'Joe',
type: 'line',
data: [3, 4, 4, 2, 5],
tooltip: {
pointFormatter: function() {
return false
}
}
}]
});
Related
I am using Highcharts and would like to combine 2 types of chart.
I would like a Bar with negative stack (changing the chart type to column) combined with Column with negative values so for each category, I have both positive and negative values.
I can't find any example of doing this so I don't even know if this is possible.
I did have a thought about doing something with the series like nested series but again don't know if this is possible and can't find an example.
If what I'm trying to do possible?
Column with negative values
// Age categories
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Population pyramid for Germany, 2015'
},
subtitle: {
text: 'Source: Population Pyramids of the World from 1950 to 2100'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
Bar with negative stack
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
Thanks to #Pawel Fus, I was able to do what I wanted and to remove the duplicate legend labels, I added showInLegend: false, in the series I wanted to hide the legend
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
colors: Highcharts.getOptions().colors.splice(0, 3),
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
plotOptions: {
series: {
stacking: true
}
},
series: [{
stack: 'john',
name: 'John',
data: [5, 3, 14, 7, 2]
}, {
stack: 'jane',
name: 'Jane',
data: [2, 12, 3, 2, 1]
}, {
stack: 'joe',
name: 'Joe',
data: [3, 4, 4, 2, 5]
}, {
showInLegend: false,
stack: 'john',
name: 'John',
data: [-5, -3, -4, -7, -2]
}, {
showInLegend: false,
stack: 'jane',
name: 'Jane',
data: [-2, -2, -3, -2, -1]
}, {
showInLegend: false,
stack: 'joe',
name: 'Joe',
data: [-3, -4, -4, -2, -5]
}]
});
I have written following code to display chart. I haven't mentioned x Axis and y axis labels. Those are auto generated.
I want to display 'low' on starting of scale and 'high' at end of scale on x axis instead of full scale.
$('#container').highcharts({
yAxis: {
title: {
text: 'Temperature'
},
id: 'my_y',
lineWidth: 2,
lineColor: '#F33',
min:0,
max:100
},
series: [{
name: 'Temperature',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
color: '#F33'
}]
});
like this?
Its a bit "hacky" i'm sure there is a better way of doing it but it works.
xAxis: {
tickAmount: 2,
labels: {
formatter: function () {
if (typeof(this.axis.ticks[this.value]) != "undefined"){
if(this.axis.ticks[this.value].isFirst) {
return 'low'
}
else if (this.axis.ticks[this.value].isLast){
return 'high'
}
}
}
}
}
I have the following scatter plot graph, I want to create the graph as such that there is no yaxis and all the scatter plots on the x-axis are seen as a straight line in both the graphs.
following is the fiddle, http://jsfiddle.net/pratik24/n24s2fyk/1/
Code snippet:
$(function () {
$('#container').highcharts('StockChart', {
navigator:{
enabled: false
},
scrollbar:{
enabled: false
},
rangeSelector : {
selected : 1,
enabled:false
},
yAxis: [{
labels: {
align: 'left'
},
title: {
text: 'OHLC'
},
height: '60%'
}, {
labels: {
align: 'left',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0
}],
series: [{
type: 'scatter',
name: 'AAPL',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
type: 'scatter',
name: 'Volume',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
yAxis: 1
}]
});
});
How can this be achieved in HighStock,
Thanks
Scatter points in straight line - set data that will be presented like this (e.g. [1,1,1,1,1]) or increase y axis scale using min and max
Example: http://jsfiddle.net/6bkzxoff/
To hide y axis use axis options:
title: {
text: ''
},
labels: {
format: ' '
}
Example: http://jsfiddle.net/6bkzxoff/1/
This is the chart I have for example to explain the question.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
We have series names in the legend. And chart is stacked with grouped columns.
we have stacked them in male and female categories.
Is there any way to get Male and Female in the legends? so that we can see only male food consumption or female food consumption at a time.
You can refer fiddle as here - jsfiddle.net/bLZHd/
Thanks
You can use labelFormatter to replace item name with stack name. Two series shoud be hidden in legend (showInLegend) paramter. Then only what you need is catching legendItemClick and iterate for checking serie stack name.
legendItemClick: function () {
var chart = this.chart,
key = this.options.stack;
$.each(this.chart.series,function(i,serie){
if(serie.options.stack === key) {
if(serie.visible)
serie.hide();
else
serie.show();
}
});
return false;
}
http://api.highcharts.com/highcharts#legend.labelFormatter
Do you really need to switch by legends?
I would recommend you that kind of issue, that switch by spans: http://jsfiddle.net/bLZHd/1/
All you need is:
$.each(chart.series, function (k, v) {
if (v.options.stack == elemId) { //elemId is the string to compare
chart.series[k].show();
} else {
chart.series[k].hide();
}
});
http://jsfiddle.net/jriggs/8Sg8K/17/
See it by hitting the update button.
Ideally, I would just like for the line series to appear on top of the column, like adjusting the z-index, if that makes sense.
I've tried disable animations with no luck. Seems to have something to do with the order that the series are declared - but not sure.
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
},{
name: 'Cleveland',
data: [10, 4, 11, 14.5, 18.2, 21.5]
}]
},
function (chart) {
$('#btn').click(function () {
chart.series[0].update({
type: "column"
});
});
});
});
});
Just adjust the zIndex for each of the series just like you said:
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5],
zIndex: 10
},{
name: 'Cleveland',
data: [10, 4, 11, 14.5, 18.2, 21.5],
zIndex: 20
}]
See it running here.