High charts tooltip location issues - highcharts
I have developed a high chart but having issues with the tooltip location.
It seems it does not refresh properly. When I take mouse it's either stuck or shows the tool tip for the earlier point where I had put the mouse. I am not sure if I am doing something wrong.
Here is a fiddle for you to playaround.
http://jsfiddle.net/Mn6sB/
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'chartContainer',
type: 'spline'
},
title: {
text: 'Pass rate statistics'
},
subtitle: {
text: 'Pass count per xxx'
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'PassCount'
},
min: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/> Pass Count: '+ this.y;
}
},
series: [{name: 'dev', data:[[Date.UTC(2013,9,25),12],[Date.UTC(2013,9,24),41],[Date.UTC(2013,9,23),1],[Date.UTC(2013,9,22),1],[Date.UTC(2013,9,20),1],[Date.UTC(2013,9,19),10],[Date.UTC(2013,9,18),22],[Date.UTC(2013,9,17),12],[Date.UTC(2013,9,16),16],[Date.UTC(2013,9,15),11],[Date.UTC(2013,9,14),4],[Date.UTC(2013,9,13),25],[Date.UTC(2013,9,12),11],[Date.UTC(2013,9,11),20],[Date.UTC(2013,9,10),16],[Date.UTC(2013,9,9),7],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,5),1],[Date.UTC(2013,9,4),1],[Date.UTC(2013,9,3),22],[Date.UTC(2013,9,2),13],[Date.UTC(2013,8,31),7],[Date.UTC(2013,8,30),12],[Date.UTC(2013,8,29),12],[Date.UTC(2013,8,28),5],[Date.UTC(2013,8,27),23],[Date.UTC(2013,8,26),2],]},{name: 'test', data:[[Date.UTC(2013,9,25),24],[Date.UTC(2013,9,24),4],[Date.UTC(2013,9,21),16],[Date.UTC(2013,9,20),41],[Date.UTC(2013,9,19),42],[Date.UTC(2013,9,18),42],[Date.UTC(2013,9,17),4],[Date.UTC(2013,9,16),3],[Date.UTC(2013,9,15),3],[Date.UTC(2013,9,14),3],[Date.UTC(2013,9,13),3],[Date.UTC(2013,9,12),1],[Date.UTC(2013,9,11),3],[Date.UTC(2013,9,9),3],[Date.UTC(2013,9,8),1],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,6),10],[Date.UTC(2013,9,1),3],[Date.UTC(2013,8,30),1],[Date.UTC(2013,8,29),1],[Date.UTC(2013,8,28),10],]},{name: 'intermediate', data:[[Date.UTC(2013,9,25),1],[Date.UTC(2013,9,24),1],[Date.UTC(2013,9,23),1],[Date.UTC(2013,9,22),1],[Date.UTC(2013,9,21),2],[Date.UTC(2013,9,20),1],[Date.UTC(2013,9,19),1],[Date.UTC(2013,9,18),1],[Date.UTC(2013,9,17),1],[Date.UTC(2013,9,16),1],[Date.UTC(2013,9,15),1],[Date.UTC(2013,9,13),1],[Date.UTC(2013,9,12),1],[Date.UTC(2013,9,11),1],[Date.UTC(2013,9,10),1],[Date.UTC(2013,9,9),1],[Date.UTC(2013,9,8),1],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,4),1],[Date.UTC(2013,9,3),1],[Date.UTC(2013,9,2),1],[Date.UTC(2013,9,1),1],[Date.UTC(2013,8,30),1],[Date.UTC(2013,8,29),2],[Date.UTC(2013,8,28),2],[Date.UTC(2013,8,27),2],]},{name: 'main', data:[[Date.UTC(2013,9,25),1],[Date.UTC(2013,9,24),1],[Date.UTC(2013,9,23),1],[Date.UTC(2013,9,22),1],[Date.UTC(2013,9,21),1],[Date.UTC(2013,9,20),1],[Date.UTC(2013,9,19),1],[Date.UTC(2013,9,18),1],[Date.UTC(2013,9,17),1],[Date.UTC(2013,9,16),1],[Date.UTC(2013,9,14),1],[Date.UTC(2013,9,13),1],[Date.UTC(2013,9,12),1],[Date.UTC(2013,9,11),1],[Date.UTC(2013,9,10),1],[Date.UTC(2013,9,9),1],[Date.UTC(2013,9,8),1],[Date.UTC(2013,9,7),1],[Date.UTC(2013,9,6),1],[Date.UTC(2013,9,5),1],[Date.UTC(2013,9,4),1],[Date.UTC(2013,9,3),1],[Date.UTC(2013,9,2),1],[Date.UTC(2013,9,1),1],[Date.UTC(2013,8,31),1],[Date.UTC(2013,8,30),1],[Date.UTC(2013,8,29),1],[Date.UTC(2013,8,28),2],[Date.UTC(2013,8,27),2],]},{name: 'test_th', data:[[Date.UTC(2013,9,24),4],[Date.UTC(2013,9,1),3],]},{name: 'intermediate_dev', data:[[Date.UTC(2013,9,21),1],[Date.UTC(2013,9,13),1],]},{name: 'rel', data:[[Date.UTC(2013,9,15),1],]},{name: 'staging', data:[[Date.UTC(2013,9,6),1],[Date.UTC(2013,8,30),1],]},{name: 'fun', data:[[Date.UTC(2013,9,5),1],[Date.UTC(2013,8,28),2],]},]
});
});
I think that all you need to do is sort your data in ascending x value order. This should sort it out.
Related
Display start and end date range in timeseries LineChart using HighCharts
I have a simple line chart where I am trying to display time series data which have start and end. Like this
{"beginTimeSeconds": 1626145840, "endTimeSeconds": 1626232240, "totalTimeInSeconds": 0, "uri": "/logout"}
However, as per HighChart config timeseries only accept one timestamp like this.
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'test'
}
},
legend: {
enabled: false
},
series: [{
type: 'line',
name: 'Test',
data: [
[1167609600000, 0.7537], // Only one timestamp
[1167696040000, 0.7537] // Only one timestamp
]
}]
});
Is there any way to pass range so that tooltip shows Start date - end date followed by value.
So by default in Highcharts, your point contains 4 main attributes which you can specify. Its x and y value, its name, and color. API reference: https://api.highcharts.com/highcharts/series.line.data
If you'd like your point to have some more attributes you can add them and e.g use one of them in the tooltip. Something like that: https://jsfiddle.net/BlackLabel/k49z8mv0/
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'test'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return 'Point value is: ' + this.y + '<br/>The total time in Second
equals: ' + this.point.totalTimeInSeconds + '<br/>' +
Highcharts.dateFormat('%Y-%m-%d', this.point.beginTimeSeconds) + ' -
' + Highcharts.dateFormat('%Y-%m-%d', this.point.endTimeSeconds);
}
},
series: [{
type: 'line',
name: 'Test',
data: [{
x: 1167609600000,
y: 0.7537,
beginTimeSeconds: 1626145840,
endTimeSeconds: 1626232240,
totalTimeInSeconds: 0
},
{
x: 1167696040000,
y: 0.7537,
beginTimeSeconds: 1626145840,
endTimeSeconds: 1626232240,
totalTimeInSeconds: 1
}
]
}]
});
If that doesn't answer your question please precise what the issue is.
Highchart ,display time in regular interval
Im trying to display a simple graph with x axis as time and y axis as points.
But, the time values seems to be off a little bit. The distance between 2017-10-06 &&= 2017-10-07 is smaller than 2017-10-10 & 2017-10-11 even though they are at same 1 day gap. How do I fix this?
Here is my code
function generatepointgraph(data) {
// Create the chart
Highcharts.setOptions({
global: {
useUTC: true
}
});
Highcharts.chart('points-container', {
chart: {
type: 'spline'
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y-%m-%d',
week: '%Y-%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: {
title: {
text: 'Weighted pts'
}
},
scrollbar: {
showFull: true
},
rangeSelector: {
enabled: false
},
title: {
text: 'Pts vs time',
},
series: [{
name: 'Points',
data: data,
step: true,
tooltip: {
valueDecimals: 2
}
}]
});
}
Highcharts: Area chart: fill in space between 0 and first point
http://jsfiddle.net/gabrielesandoval/efHq7/
Is there a way to fill in the gap between the y-axis and the first point. The first point on my chart should be "25 years" and i would like the area between 0 and 25 to be filled in as well. Even if the tooltip doesn't work for that point, I would just like to visually show that the values between 0 and the first point.
I tried adding a point with a x value of zero but that didnt work. The only area charts I have seen where there is no gap between the two axis and the area are examples where the chart is inverted. Is there a proper way to do this?
Current Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Monthly Comparison'
},
subtitle: {
text: '1 vs 2'
},
xAxis: {
min: 0,
categories: [0, '25 years', '30 years', '35 years', '40 years', '45 years']
},
yAxis: {
labels: {
formatter: function() {
return '$' + this.value;
}
},
min: 0,
title: {
text: 'Cost'
}
},
tooltip: {
shared: true,
valuePrefix: '$'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'series1',
data: [['',60],['25 years',60], ['30 years',60], ['35 years',60], ['40 years',60], ['45 years',60]]
}, {
type: 'area',
name: 'series2',
data: [['',90], ['25 years',100], ['30 years',175], ['35 years',300], ['40 years',400], ['45 years',400]]
}]
});
});
You should set minPadding/maxPadding as 0, but these parameters doesn't work with categories. So you need to use numeric xAxis, instead of categories.
Single-category column chart in Highcharts 3.0 beta
I am using a single xAxis category and 4 discrete data series (each one containing a single data item). Unfortunately, when I try to construct a simple ColumnChart using Highcharts 3.0 beta, the chart is never displayed:
chartB = new Highcharts.Chart({
chart: {
renderTo: 'containerB',
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan' //Just one category
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9] //One data point for each series element.
}, {
name: 'New York',
data: [83.6]
}, {
name: 'London',
data: [48.9]
}, {
name: 'Berlin',
data: [42.4]
}]
});
Please see http://jsfiddle.net/7CJhf/5/.
A workaround is to append an empty category ('') and a zero value to each series item, but this moves the column set to the left. Is there any proper workaround to create a column chart with Highcharts 3.0 beta, using single data points?
I've encountered this issue before issue 1535 with a stacked column of length 1. This is fixed in the lastest master branch highchart.src.js and highcharts-more.src.js. Try updating the script-references to the raw github references here, and it should work ok.
Highcharts Bar Extend past MaxValue
I want to make a simple bar chart in Highcharts. However, I would like the max value to be less than the actual maximum value in the series, and provide a visual clue that that is happening. If you referenced the highcharts demo: http://www.highcharts.com/demo/bar-basic I want the scale to end at 4,000, even though the longest bar extends to 4054. That part is easy, by just setting the Max. But, I want some visual indicator to let the user know that the bar extends beyond the max. This is for cases where the highest value in the series is so high, it makes it hard to see the other values in the graph relative to each other. We essentially don't need to be concerned by the outlier, but need to know it lies outside the axis. Thinking it through, I can set the ticks to be less than the max value, and end on tickInterval false. Is there another option?
Well but where this information should be displayed?
I've prepared simple example which marked this information in tooltip and in report div below chart.
http://jsfiddle.net/sbochan/8sKcs/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
max:4000,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
if(this.y > (this.series.chart.yAxis[0].max))
return this.series.name +': '+ this.y + ' max is smaller: '+this.series.chart.yAxis[0].max ;
else
return this.series.name +': '+ this.y;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
},function(chart){
var max = chart.yAxis[0].max,
content = '<h2>Points</h2><br/>';
$.each(chart.series,function(i,serie){
$.each(serie.data,function(j,data){
if(data.y > max)
content += 'Point: '+data.y+' is bigger than max: '+max;
});
});
$('#report').html(content);
});
});
});
EDIT:
You can add also
data.graphic.attr({
fill:'yellow'
});
To change color of bar.