Concerning http://jsfiddle.net/5gjne/10/ I would like simply hide the "red" range series (range2) into tooltip, how to make this?
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
Thanks!
If you disable mouse tracking on that series it'll be excluded from tooltip.
{
name: 'Range',
data: ranges2,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
color: 'red',
zIndex: 0,
enableMouseTracking: false //<--add this
},
See updated fiddle.
Related
i have a highstock chart with multiple series, each one has it's own tooltip(shared:false), after hovering mouse, a label appear on xAxis, how to get ride of it?
{
xAxis: {
crosshair: false
},
tooltip: {
useHTML: true,
shadow: false,
borderRadius: 0,
borderColor: "transparent",
backgroundColor: "transparent",
borderWidth: 0,
},
plotOptions: {
series: {
turboThreshold: 0,
},
states: {
hover: {
enabled: false,
},
},
},
series: [ {
type: "line",
name: series[0].name,
data: [...],
color: series[0].color,
tooltip: {
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
},
},
{
type: "line",
data: [...],
name: series[1].name,
color: series[1].color,
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
}],
}
in here i put a sample of what i mean and a picture:
js fiddle
From Highcharts API:
split: boolean Since 5.0.0
Split the tooltip into one label per series, with the header close to
the axis. This is recommended over shared tooltips for charts with
multiple line series, generally making them easier to read. This
option takes precedence over tooltip.shared.
To get rid of the header set headerFormat to an empty string.
tooltip: {
headerFormat: ''
}
Live demo: https://jsfiddle.net/BlackLabel/bc467dmo/
API Reference: https://api.highcharts.com/highstock/tooltip.headerFormat
I am having this jsfiddle example, where I need to hide the tooltip that shows on the xAxis. I want to keep the one that shows in the middle.
Here is some part of the related settings:
series: [{
name: 'AAPL Stock Price',
data: data.slice(80, 110),
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
}],
yAxis: {
labels: {
align: 'right',
x: 0,
y: -5
},
opposite: false,
},
This is the one I want to remove:
Setting tooltip.split as a false should fix the issue.
Demo: https://jsfiddle.net/BlackLabel/Le8w0r63/
API: https://api.highcharts.com/highstock/tooltip.split
I am trying to make a scatter plot with two serie names (subcategory).
This example from highcharts is my starting point.
In this example, you only have two categories, namely female and male. I would like to see the name of the female/male in the tooltip. Not in the legend!
In my example jsfiddle I added four names in the data and tooltip
I understand that this is not the correct way, but I would like to clarify what I want to achieve. Does anyone know how to process this correctly, so that there are still two categories in the legend (female/male), but in the tooltip also the name of the female/male.
Thank you so much already!
Highcharts.chart('container', {
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.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'name: (), {point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [{name: 'Anna', [161.2, 51.6]}, {name: 'Clair',[167.5, 59.0]]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [{name: 'James',[174.0, 65.6], {name: 'Peet',[175.3, 71.8]]
}]
});
You have a fair number of errors with brackets and curly brackets, where there are too many or few brackets. Too many for me to point them all out, but mainly around the section area.
However, you need to define the scatter plot coordinates as x, and y when you define a name for the series, like this:
series: [{
name: 'Female',
data: [{
name: 'Anna'
x: 161.2,
y: 51.6
},
...
]
}
...
]
Also, to show the name of the datapoint (i.e. the person), you can use the following tooltip formatter:
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'Name: {point.name}, {point.x} cm, {point.y} kg'
}
Highcharts API on scatter data: http://api.highcharts.com/highcharts/series.scatter.data
Working example using your data: http://jsfiddle.net/ewolden/0uc1g8b5/2/
It seems like when I enable crosshair for the yAxis, only the last series defined get a crosshair. I would like all of them to be crosshaired.
(.. and I would love if they also had the color (or preferably a darker variant) as the series.)
You can create an y axis per series, link those additional axes to the first one and define a specific crosshair in each axis - then link series with a specific axis and you will get an seperate customizable crosshair per series.
Highcharts.chart('container', {
yAxis: [{
gridLineWidth: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[0]
}
}, {
linkedTo: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[1]
},
visible: false
}],
tooltip: {
shared: true
},
series: [{
data: data.slice()
}, {
yAxis: 1,
data: data.reverse()
}]
});
example: http://jsfiddle.net/absuLu6h/
Is it possible to make an arearange series like the following? :
I saw the option to set oppacity, but that will give the series like the following:
Is there a way to hide the top line or to set the opacity of top line only?
You can set only lineWidth for whole area-range series. Instead you can disable that line, and use separate series: http://jsfiddle.net/9agdf5ar/
series: [{
name: 'Temperature',
data: averages,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
dataLabels: {
enabled: true
},
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}]