Issue with tooltip on Highcharts with multiple series added dynamically - highcharts

Hello I am currently facing a problem with the tooltip on my chart which adds data dynamically through the use of Series.SetData() function of highcharts.
The issue however is not related to the data which is added I think but with the tooltip everytime I mouse over a point in the graph.
To better understand I will post two screenshots with the issue:
Whenever I mouse over a certain point in the graph the tooltip keeps changing and the values presented are the ones posted in the screenshots. If I drag the mouse away the tooltip that remains on the screen is the second one and I am no longer able to see the Y1 value.
I probably have some bad chart configuration so here is the code of my graph:
$(function () {
// Create the chart for node 1
$('#container').highcharts('StockChart', {
chart: {
zoomType: 'x',
events: {
load: requestDataNode1
},
},
credits: {
enabled: false
},
title: {
text: 'Live Data'
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
yAxis: {
labels: {
formatter: function () {
//return (this.value > 0 ? ' + ' : '') + this.value + '%';
return this.value;
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
legend:{ enabled: true},
plotOptions: {
series: {
showInNavigator: true
},
spline: {
turboThreshold: 0,
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 2,
split: false
},
navigator: {
series: {
data: []
}
},
});
});
I do not know why this happens , at first I thought it could be related with not having a value for a series for a specific date but then I checked my series as you can see in the screenshots and there is indeed a value for both series.
I thank in advance for your help.

I somehow resolved this issue by adding the shared property in the tooltip property and setting to false, however now I only receive a single value.
Is it possible to keep seeing all values?

Related

HighCharts acessing x-axis labels with jquery

I am new to working with HighCharts. I am working on a project that was started by someone else but not finished. In this project the user will have a chart that spans multiple days but only wants to use certain sections of it. The user wants to use the bottom navigation 1 bar which lets you zoom into certain time spans to move around the chart to save different version of the chart. They will press the save button to save the state of the chart which they are currently viewing. I need a to know if it is possible if you can access the labels in the x-axis of the line chart so I can save the time positions they are looking at? Do HighCharts provide any way of getting output from the Navigation 1 bar?
I have accessed the x-axis labels with jquery and can see the data I need using ('#fn.init').prevObject[0].all.chartContainer.innerText, but I am not sure if this is the correct way to go about it. Is there a better way to do this?
Chart Configuration:
Highcharts.stockChart('container',
{
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'spline',
zoomType: 'xy',
panning: true,
panKey: 'ctrl',
events: {
load() {
const chart = this;
chart.showLoading('Loading, Please Wait ...');
setTimeout(function() {
chart.hideLoading();
},
1500);
}
}
},
boost: {
useGPUTranslations: true,
turboThreshold: 1000
},
rangeSelector: {
buttons: [
$('#heatingStart').val(),
toDateAdd($('#heatingStart').val(), 1, 'H'));
graphicinfo(RecipeId, $('#heatingStart').val(), toDateAdd($('#heatingStart').val(), 8, 'H'));
graphicinfo(RecipeId, $('#heatingStart').val(), toDateAdd($('#heatingStart').val(), 1, 'D'));
{
text: 'All',
events: {
click: function() {
graphicinfo(RecipeId, $('#ReportStartDate').val(), $('#ReportEndDate').val());
}
}
}
]
},
legend: {
enabled: true
},
xAxis: {
title: {
text: 'Time (Hrs)'
},
categories: categoriesX
},
yAxis: {
tickWidth: 1,
title: {
text: 'Temperature (°F)'
},
labels: {
format: '{value:.0f} °F'
},
lineWidth: 1,
opposite: true
},
title: {
text: 'Thermocouples Temperature Data'
},
series: termocouplesdata
});

remove xAxis label of vertical crosshair in highchart highstock

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

Highcharts adding labels/columns with no data

I'm having a problem with Highcharts drawing points that have no data attached to them. The chart is a column chart with drilldown, showing an average "time" per week on the top level, with a drilldown displaying the actual value per case for the selected week.
My problem is this: When I drill down into a certain week, cases that do not exist are still displayed on the chart if they exist between two existing case IDs.e.
Consider the data being passed for week 6: [[272, 25.07][297, 500.54]], only two cases exist: 272 and 297. However, Highcharts is giving me this:
https://i.stack.imgur.com/MpABB.png
This is the code for the chart itself:
Highcharts.chart('DrilldownChart', {
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: "",
labels: {
rotation: 90
},
},
yAxis: {
title: {
text: ''
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
column: {
minPointLength: 0
},
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
format: '{point.y:.1f}',
rotation: 270
}
}
},
tooltip: {
pointFormat: '<span style="color:{#000}"></span>{point.y:.2f}<br/>'
},
series: MainDataArray,
drilldown: {
series: DrilldownDataArray,
}
});
Does anyone know how to stop it from drawing the labels/columns between points with actual data?
Thanks!
You just need to convert the x values from your array to String type, then they would be treated as a category name instead of category indexes. In order to convert it, you can use Array.map() function just like that:
var drilldownSeries = [{
id: 'One',
data: [[272, 25.07], [297, 500.54]].map(elem => {
return [elem[0].toString(), elem[1]]
})
}]
However, before that please make sure that your xAxis.type is set to 'category', because I noticed that in your code there is an empty string assigned to type field.
Here is the example which shows how to achieve described effect:
https://jsfiddle.net/8h03urrr/

highchart line don't show line even when data points exists

I have an issue with highcharts of type 'spline'
I've sent data to the chart and even that the data exist the chart line seems to be cut at random parts
more ever between null points on the graph a line is drawn(the drop on the 12/06/16 in the black series) so it isn't a null issue. and I've got no errors on my console.
this is my graph init:
getChartElement().highcharts({
exporting: {enabled: false},
chart: {
type: 'spline',
zoomType: 'x',
events: {
selection: rangeSelection
}
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
formatter: function () {
return '<b>' + this.series.name + '</b><br>' +
Highcharts.dateFormat('%e %b %Y %H:%M', this.x) + '<br>' +
Highcharts.numberFormat(this.y, 2);
}
},
series: series,
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
labels: {
format: '{value:%m/%d/%y}'
},
events: {},
plotLines: [{
value: vm.issueDate,
width: 1,
color: 'green',
dashStyle: 'dash',
zIndex: 5,
}]
},
yAxis: {},
plotOptions: {
series: {
turboThreshold: configuration.maxGraphPoints
},
spline: {
marker: {
enabled: vm.isMarkersVisible
}
}
}
});
I can't seem to find a reason for the gaps in the graph. has anyone seen something like this before?
EDIT:
I've changed the image to another more concentrated , and added the data for this graph
screenshot of the issue I should say that in the screen shot there is one point but there are a lot more around it, they should have option for a screenshot gif :)
the data:
"{"tags":["Series1","Series2"],"data":[[1483436500000,34.219906,56.668186000000006],[1483439200000,34.047556,57.155266],[1483441900000,34.068456,57.649016],[1483444600000,34.050936,58.448235999999994],[1483447300000,34.316396,58.039416],[1483450000000,34.546116,58.428616000000005],[1483452700000,34.743466,58.722346],[1483455400000,34.850176,58.737145999999996],[1483458100000,35.050486,58.115166],[1483460800000,35.002866,57.522126],[1483463500000,34.855796,55.661925999999994],[1483466200000,34.796566,55.579976],[1483468900000,34.914366,55.925126000000006],[1483471600000,35.037526,56.223866],[1483474300000,35.008276,55.952646],[1483477000000,34.938055999999996,55.601265999999995],[1483479700000,34.946396,57.74743599999999],[1483482400000,34.860726,56.422796000000005],[1483485100000,34.749856,56.456556000000006],[1483487800000,34.734536,56.02268599999999],[1483490500000,34.710696,55.649186],[1483493200000,34.755316,55.868066],[1483495900000,34.801966,56.07148599999999],[1483498600000,35.175086,55.311626000000004],[1483501300000,34.868296,55.749516],[1483504000000,34.498436,56.425416],[1483506700000,34.526066,56.405936],[1483509400000,34.495226,56.905456],[1483512100000,34.736996,57.665266],[1483514800000,34.403805999999996,56.243786],[1483517500000,34.445266,57.025186000000005],[1483520200000,34.474966,58.428715999999994],[1483522900000,34.225066,59.531206],[1483525600000,33.961646,60.677266],[1483528300000,33.786636,61.355536],[1483531000000,33.875166,60.646305999999996],[1483533700000,33.905626,62.193096],[1483536400000,33.937476,61.098146],[1483539100000,34.293316,59.28490599999999],[1483541800000,34.530886,59.912486],[1483544500000,34.782956,59.955256000000006],[1483547200000,35.121126,61.357696000000004],[1483549900000,34.718436,61.931906],[1483552600000,35.711916,57.322496],[1483555300000,35.475236,57.541686],[1483558000000,35.481466,56.810136],[1483560700000,35.040016,56.614756],[1483563400000,35.030556,59.863856],[1483566100000,34.920466,56.529756000000006],[1483568800000,35.050486,58.436576],[1483571500000,35.050486,57.734145999999996],[1483574200000,35.156616,57.434805999999995],[1483576900000,35.154466,57.73637599999999],[1483579600000,35.101836,58.059096],[1483582300000,35.051496,57.998926],[1483585000000,34.998855999999996,58.298096],[1483587700000,34.911516,58.426916000000006],[1483590400000,35.028296,58.00146599999999],[1483593100000,34.748786,58.137996],[1483595800000,34.739406,57.887506],[1483598500000,34.808656,58.491716],[1483601200000,34.785016,57.416966],[1483603900000,34.971316,57.39732599999999],[1483608700000,null,64.130136],[1483609300000,34.633606,null],[1483611400000,null,53.998146000000006],[1483612000000,35.536296,null],[1483614100000,null,56.150756],[1483614700000,35.490406,null],[1483616800000,null,56.581025999999994],[1483617400000,35.243436,null],[1483619500000,null,57.063676],[1483620100000,35.638996,null],[1483622200000,null,57.347356000000005],[1483622800000,35.638996,null],[1483624900000,null,58.504306],[1483625500000,35.940726,null],[1483627600000,null,58.529796000000005],[1483628200000,36.022656,null],[1483630300000,null,56.503736],[1483630900000,36.081686,null],[1483633000000,null,55.968286000000006],[1483633600000,36.372056,null],[1483635700000,null,56.637946],[1483636300000,36.719646,null],[1483638400000,null,55.93278599999999],[1483639000000,36.721016,null],[1483641100000,null,54.665316000000004],[1483641700000,36.902646,null],[1483643800000,null,54.823786],[1483644400000,37.109685999999996,null],[1483646500000,null,54.314856000000006],[1483647100000,37.317226,null],[1483649200000,null,54.75750600000001],[1483649800000,37.364876,null],[1483651900000,null,54.618516],[1483652500000,36.959966,null],[1483654600000,null,54.384485999999995],[1483655200000,37.191016,null],[1483657300000,null,53.986126],[1483657900000,37.354926,null],[1483660000000,null,53.833296000000004],[1483660600000,37.128735999999996,null],[1483662700000,null,53.708625999999995],[1483663300000,37.340576,null],[1483665400000,null,53.942555999999996],[1483666000000,37.298246,null],[1483668100000,null,54.327676],[1483668700000,37.344015999999996,null],[1483670800000,null,52.919466],[1483671400000,37.384856,null],[1483673500000,null,52.566205999999994],[1483674100000,36.876546,null],[1483676200000,null,51.773675999999995],[1483676800000,36.821936,null],[1483678900000,null,51.389706000000004],[1483679500000,36.769695999999996,null],[1483681600000,null,53.077135999999996],[1483682200000,36.648186,null],[1483684300000,null,52.533496],[1483684900000,36.490846,null],[1483687000000,null,51.950295999999994],[1483687600000,36.326346,null],[1483689700000,null,53.609016],[1483690300000,36.595346,null],[1483692400000,null,52.940315999999996],[1483693000000,36.005396,null],[1483695100000,null,52.44433599999999],[1483695700000,36.063386,null],[1483697800000,null,51.514185999999995],[1483698400000,35.950686,null],[1483700500000,null,53.019206],[1483701100000,35.888916,null],[1483703200000,null,52.924876],[1483703800000,35.708086,null],[1483705900000,null,53.430285999999995],[1483706500000,35.610226,null],[1483708600000,null,54.919156],[1483709200000,35.826046,null],[1483711300000,null,56.011066],[1483711900000,35.954396,null],[1483714000000,null,60.86370599999999],[1483714600000,36.206146,null],[1483716700000,null,63.932226],[1483717300000,36.553256,null],[1483719400000,null,65.751636],[1483720000000,36.376646,null],[1483722100000,null,66.588736],[1483722700000,36.469485999999996,null],[1483724800000,null,65.012736],[1483725400000,36.719015999999996,null],[1483727500000,null,64.805766],[1483728100000,36.722796,null],[1483730200000,null,65.033006],[1483730800000,36.890826,null],[1483732900000,null,65.026316],[1483733500000,36.523786,null],[1483735600000,null,62.355006],[1483736200000,35.250296,null],[1483738300000,null,61.885886],[1483738900000,35.068205999999996,null],[1483741000000,null,62.914156000000006],[1483741600000,35.159856,null],[1483743700000,null,61.454406000000006],[1483744300000,35.295906,null],[1483746400000,null,60.997966000000005],[1483747000000,35.431956,null],[1483749100000,null,60.864366000000004],[1483749700000,35.568706,null],[1483751800000,null,60.33397599999999],[1483752400000,35.612716,null],[1483754500000,null,60.226226],[1483755100000,35.638996,null],[1483757200000,null,60.695226000000005],[1483757800000,35.638996,null],[1483759900000,null,60.044976000000005],[1483760500000,35.747096,null],[1483762600000,null,59.267495999999994],[1483763200000,35.906606,null],[1483765300000,null,60.225086000000005],[1483765900000,35.473906,null],[1483768000000,null,60.19800599999999],[1483768600000,35.141326,null],[1483770700000,null,60.319676],[1483771300000,34.927346,null],[1483773400000,null,60.239565999999996],[1483774000000,34.828386,null],[1483776100000,null,60.844066],[1483776700000,34.708716,null],[1483778800000,null,60.570926],[1483779400000,34.583616,null],[1483781500000,null,60.19209599999999],[1483782100000,34.463946,null],[1483784200000,null,61.080535999999995],[1483784800000,34.531076,null],[1483786900000,null,62.448046000000005],[1483787500000,34.557726,null],[1483789600000,null,62.603616],[1483790200000,34.583225999999996,null],[1483792300000,null,63.707105999999996],[1483792900000,34.602586,null],[1483795000000,null,63.756426000000005],[1483795600000,34.631766,null],[1483797700000,null,64.362686],[1483798300000,34.585755999999996,null],[1483800400000,null,63.391046],[1483801000000,34.893546,null],[1483803100000,null,63.281465999999995],[1483803700000,34.780836,null],[1483805800000,null,62.069226],[1483806400000,34.830476,null],[1483808500000,null,61.197186],[1483809100000,35.012096,null],[1483811200000,null,61.948235999999994],[1483811800000,35.077906,null],[1483813900000,null,62.346136],[1483814500000,35.009746,null],[1483816600000,null,60.837086],[1483817200000,35.134366,null],[1483819300000,null,62.107156],[1483819900000,35.204375999999996,null],[1483822000000,null,62.358816000000004],[1483822600000,35.244596,null],[1483824100000,35.265586,61.764275999999995]]}"
Since a lot of your values are null these will create gaps in your series. To avoid this, set connectNulls to true in your plotOptions, which will tell highchart to graph even when there is a null.
API ref on spline.connectNulls: https://api.highcharts.com/highcharts/plotOptions.spline.connectNulls
Edit:
Working example: https://jsfiddle.net/y5ygdx2a/2/

high charts - how do I get a stacked graph to the full width?

I have created a high chart but would like to have a similar voting style to youtube; with positive vs negative. My issue is getting the bar to stay the full width of the graph, I know percentages can fix this but I want whole numbers.
http://jsfiddle.net/u6H3b/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft:0
},
title: {
text: 'votes'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Apples'],
title: {
enabled: false
}
},
exporting: {
enabled: false
},
yAxis: {
min: 0,
max:23,
title: {
enabled: false },
gridLineColor: '#fff',
lineColor: '#fff'
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Yes',
data: [20]
},{
name: 'No',
data: [3]
}]
});
});
One option is to use 'endOnTick':
yAxis: {
endOnTick: false,
http://jsfiddle.net/f3eFd/
If you want the end tick (23) to show, you could also add:
tickInterval:23,
http://jsfiddle.net/bLDpg/
If you really want to get fancy, you can define each tick you need. In the following code, it prints ticks at 0, 3 and at 23.
tickPositioner: function () {
var positions = [0, 3, 23];
return positions;
},
http://jsfiddle.net/aSHz3/
I think, all you need to set is endOnTick: false and maxPadding: 0, see: http://jsfiddle.net/u6H3b/1/
The only problem is that last tick is not displayed, if this is issue for you, use tickPositioner as suggested by SteveP.

Resources