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
good morning guys,
I need your help for a problem that I can not solve.
I need to highlight the intersections between a simple data series and the related moving average.
The data of the moving average are automatically generated by HighStock and are not calculated by me (otherwise I would have almost solved the problem!).
If it is not possible to graphically highlight with different colors every time the series is above or below the moving average
I would like to calculate the difference between the two series (in this way I could draw a single line around the zero value with negative red values and values green positive for example).
After numerous researches I have not yet solved my problem. I must say that the documentation of HighChart / HighStock is very complete but it is mainly for professionals.
Thanks for your help!
This is what I need (look at the picture)
$('#container').highcharts('StockChart', {
title: { text: 'Relative Strenght' },
navigator: { enabled: false },
series: [
{
id: 'forza-rel',
type: 'spline',
name: 'Rel. Str.',
data: forza_relativa,
},
{
name: 'M.A. 5',
type: 'sma',
linkedTo: 'forza-rel',
color:'#FF0000',
dashStyle: 'line',
marker: { enabled: false },
params: { period: 5 }
}
]
});
I need to highlight the intersections between a simple data series and
the related moving average.
It can be done, however, it requires a lot of custom code and it's a bit tricky.
I would like to calculate the difference between the two series
This can be done easily. SMA is just another series, so you have to loop through SMA series data and make a difference between its data and a basic series data. Than use series.setData() method to update the third series with calculated values (areasplie for example).
HTML:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
JS:
Highcharts.stockChart('container', {
chart: {
height: 500,
events: {
load: function() {
var chart = this,
series = chart.series,
data = [],
offset,
diff,
i;
offset = series[0].xData.length - series[1].xData.length;
for (i = 0; i < series[1].xData.length; i++) {
diff = series[0].yData[i + offset] - series[1].yData[i];
data.push({
x: series[1].xData[i],
y: diff
});
}
chart.series[2].setData(data);
}
}
},
rangeSelector: {
selected: 0
},
title: {
text: 'AAPL Stock Price'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
yAxis: [{
height: '60%',
top: '0%',
id: '0'
}, {
height: '36%',
top: '62%',
id: '1'
}],
series: [{
type: 'spline',
id: 'aapl',
name: 'AAPL Stock Price',
data: data,
yAxis: '0'
}, {
type: 'sma',
linkedTo: 'aapl',
marker: {
enabled: false
},
yAxis: '0'
}, {
type: 'areaspline',
yAxis: '1',
color: 'green',
negativeColor: 'red',
data: []
}]
});
Demo:
https://jsfiddle.net/wchmiel/863n241h/3/
Highcharts v3.01
I'm trying to use a scatter plot to draw points within named categories (these are actually numeric, but out of series and I don't want gaps).
Using line graph types would work, but I'd rather not as I have potentially hundreds of series and scatter points are clearer.
The closest I have come is this:
EDIT - I would post a descriptive image, but apparently I need reputation points. Sigh.
Please see here: http://i117.photobucket.com/albums/o63/Harry_Flashman/close_zpsfe6d3ea2.png
This is using points referencing an x and y,
data: [{x:108432,test:100,y:0}, {x:109802,test:100,y:51}, etc. ]
I want to do exactly as above, but without the gaps.
The only way I can see to have a non-linear gap-free axis is with categories, which I've used before on other line-type graphs, but never with a Scatter Plot.
If I use the x-axis type "category" with a category array instead, it only assigns one scatter value to each and the remainder to ascending numeric categories (i.e. it doesn't group them if I use the point "name" option).
xAxis: {
type: category,
categories: ['108432','109802','110240', etc. ]
}
with datapoints that look like this:
data: [{name:'108432',test:100,y:0}, {name:'109802',test:100,y:51}, etc. ]
Ends up like this. Each scatter point gets its own category.
http://i117.photobucket.com/albums/o63/Harry_Flashman/not_zps31aa4fef.png
Any help appreciated, this would be great if I could get it to work.
Thanks!
Pat
PS. Added entire chart script (minus large amounts of data) below. This is the "almost works" version.
$('#container').highcharts({
chart: { type: 'scatter', zoomType: 'xy' },
title: { text: 'Revision vs Runtime Scatter' },
subtitle: { text: 'L3 Performance Test' },
xAxis: {
title: { enabled: true, text: 'Revision' },
startOnTick: true,
endOnTick: true,
showLastLabel: true,
showEmpty: false,
legend: { y: 120, floating: true, backgroundColor: '#FFFFFF' },
labels: { rotation: -90, align: 'right' },
categories: ['101831','101849','101850','101857','101861','101866','101868','101878','101879','101880','101881','101882','101883','101884','101885','101888','101894','101900','101903','101905','101908','101913','101914']
},
yAxis: { title: { text: 'Variance (%)' } },
legend: { layout: 'vertical' },
plotOptions: {
scatter: {
marker: { radius: 5, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } },
states: { hover: { marker: { enabled: false } } },
tooltip: {
headerFormat: '<b></b>',
pointFormat: '<b>Test {point.test}</b><br/>r{point.x}<br/>{point.y}% change<br/>{series.name}'
}
}
},
series: [{
name: 'PRd',
data: [{x:101857,test:267,y:0}, {x:101861,test:267,y:-1}, {x:101866,test:267,y:-0}, {x:101868,test:267,y:-1}, {x:101878,test:267,y:-1}, {x:101879,test:267,y:-1}, {x:101880,test:267,y:-0}, {x:101881,test:267,y:-0}, {x:101882,test:267,y:-0}, {x:101883,test:267,y:-0}, {x:101884,test:267,y:-0}, {x:101885,test:267,y:-0}, {x:101888,test:267,y:-0}, {x:101894,test:267,y:-1}, {x:101900,test:267,y:-0}, {x:101903,test:267,y:-0}, {x:101905,test:267,y:-1}, {x:101908,test:267,y:-1}, {x:101913,test:267,y:0}, {x:101914,test:267,y:1}, {x:101831,test:430,y:0}, {x:101849,test:430,y:1}, {x:101850,test:430,y:1}]
}, {
name: 'Non-PRd',
data: [{x:101831,test:100,y:0}, {x:101849,test:100,y:51}, {x:101850,test:100,y:51}, {x:101857,test:100,y:52}, {x:101861,test:100,y:49}, {x:101866,test:100,y:50}, {x:101868,test:100,y:50}, {x:101878,test:100,y:50}, {x:101879,test:100,y:50}, {x:101880,test:100,y:50}, {x:101881,test:100,y:50}, {x:101882,test:100,y:50}, {x:101883,test:100,y:50}, {x:101884,test:100,y:50}, {x:101885,test:100,y:50}, {x:101888,test:100,y:50}, {x:101894,test:100,y:50}, {x:101900,test:100,y:50}, {x:101903,test:100,y:0}, {x:101905,test:100,y:50}, {x:101908,test:100,y:51}, {x:101913,test:100,y:50}, {x:101914,test:100,y:50}, {x:101831,test:10937,y:0}, {x:101849,test:10937,y:2}]
}]
});
});
Ok, fixed it via a workaround,
Essentially in Javascript I've added a position to the point arrays relating to which of the categories the point belongs to (generated via PHP, the categories are sorted ascending). Relevant bits are as follows:
xAxis: {
categories: ['r101831', 'r101849', 'r101850']
}
plotOptions: {
tooltip: {
headerFormat: '<b></b>',
pointFormat: '
<b>Test {point.test}</b><br/>
r{point.revision}<br/>
{point.y}% change<br/>
{series.name}'
}
}
series: [{
name: 'PRd',
data: [
{x:3,revision:101831,test:267,y:0},
{x:4,revision:101849,test:267,y:-1},
{x:5,revision:101850,test:267,y:-0}
]}
]
End result looks gorgeous, I love HighCharts.
Pic here: http://i117.photobucket.com/albums/o63/Harry_Flashman/fixed_zps9952d58d.png
I am creating a HighChart with a plotLine in it. The plotLine has a fixed value, while the data can vary between charts.
HighChart scales the y-axis automatically based on the maximum value of data, but it doesn't consider the plotLine's value in its calculations.
Hence, if the data range encompasses the plotLine value, the plotLine gets shown, but gets cropped out of the viewport if not.
Example:
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 650]
}]
});
});
});
JSFiddle for above code: http://jsfiddle.net/4R5HH/3/
The goal line (in red) is shown for the default data, but if I change the data to [107, 31, 250], then the plotLine goes out of the graph viewport and hence becomes invisible.
One other option that does not introduce data points:
yAxis: {
minRange:450,
min:0,
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
This sets the minimum for the yAxis to 0 (this is unlikely to be false in this case) and the minimum Range to 450.
See updated fiddle.
You need to add in a point to you chart but disable the marker.
I added a new series with scatter plot type and its value equal to the goal value:
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}
See updated jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/
In some cases, wergeld's solution would be preferable than jank's solution, especially when you are not sure about min and minRange. But wergeld's solution has a minor issue. If you point your mouse over the plot line, it will show a point and tooltip on the point. To avoid this, I have modified his solution and added enableMouseTracking to get rid of the problem.
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450],
enableMouseTracking: false
}
See updated jsFiddle: http://jsfiddle.net/4R5HH/570/
You could simply set the max attribute to the max value you will have:
yAxis: {
max:650 //HERE
plotLines...
},
Adjust the axis while loading the chart:
$(function() {
$('#container').highcharts({
chart: {
events: {
load: function() {
var check = $('#container').highcharts();
var min = check.yAxis[0].min;
var max = check.yAxis[0].max;
var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
if (pLine > max) {
check.yAxis[0].setExtremes(null, pLine);
}
if (pLine < min) {
check.yAxis[0].setExtremes(pLine, null);
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar'],
},
yAxis: {
minPadding: 0.30,
plotLines: [{
color: '#FF0000',
width: 2,
value: 200
}]
},
series: [{
data: [70, 60, 95]
}]
});
});