highcharts issue with tooltip and formatter with min:0 on yaxis - highcharts
No tooltip is shown if shared is false!!!
If i change the min to null it shows the tooltip!
In the previous highcharts this issue doesn't exist
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
yAxis: {
min: 0,
startOnTick: false
},
tooltip: {
crosshairs: [true,true],
formatter: function() {
return 'The value for <b>'+ this.x +
'</b> is <b>'+ this.y +'</b>';
}
},
series: [{
data:[[1345593599999,null],[1345593600000,0.0010000000474975],[1345594200000,0.0010000000474975],[1345594800000,0.0010000000474975],[1345595400000,0.0010000000474975],[1345596000000,0.0010000000474975],[1345596600000,0.0010000000474975],[1345597200000,0.0010000000474975],[1345597800000,0.0010000000474975],[1345598400000,0.0010000000474975],[1345599000000,0.0010000000474975],[1345599600000,0.0010000000474975],[1345600200000,0.0010000000474975],[1345600800000,0.0010000000474975],[1345601400000,0.0010000000474975],[1345602000000,0.0010000000474975],[1345602600000,0.0010000000474975],[1345603200000,0.0010000000474975],[1345603800000,0.0010000000474975],[1345604400000,0.0010000000474975],[1345605000000,0.0010000000474975],[1345605600000,0.0010000000474975],[1345606200000,0.0010000000474975],[1345606800000,0.0010000000474975],[1345607400000,0.0010000000474975],[1345608000000,0.0010000000474975],[1345608600000,0.0010000000474975],[1345609200000,0.0010000000474975],[1345609800000,0.0010000000474975],[1345610400000,0.0010000000474975],[1345611000000,0.0010000000474975],[1345611600000,0.0010000000474975],[1345612200000,0.0010000000474975],[1345612800000,0.0010000000474975],[1345613400000,0.0010000000474975],[1345614000000,0.0010000000474975],[1345614600000,0.0010000000474975],[1345615200000,0.0010000000474975],[1345615800000,0.0010000000474975],[1345616400000,0.0010000000474975],[1345617000000,0.0010000000474975],[1345617600000,0.0010000000474975],[1345618200000,0.0010000000474975],[1345618800000,-2147483.75],[1345619400000,-1073741.625],[1345620000000,0.39273166656494],[1345620600000,0.56872498989105],[1345621200000,0.82007998228073],[1345621800000,1.2374949455261],[1345622400000,1.8156150579453],[1345623000000,2.515278339386],[1345623600000,3.2450299263],[1345624200000,4.0675683021545],[1345624800000,5.0065865516663],[1345625400000,5.9605016708374],[1345626000000,6.8903851509094],[1345626600000,7.8542332649231],[1345627200000,8.8226404190063],[1345627800000,9.7728967666626],[1345628400000,10.693440437317],[1345628400001,null],[1345679999001,null]]
}]
});
});
Two of your values are negative, hence setting min to 0 takes them out of view, that seems to be breaking the tooltip, if i remove the two negative values it works. Why do u have negative values? esp when u are setting min to 0?
http://jsfiddle.net/hBbdj/2/
Related
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 xAxis first label repeating on all ticks
I am using Highchart to create a chart. I am using xAxis type: 'datetime'
my first xAxis label is showing repeatedly. When i add tickInterval all graph ticks overlaps on one and another, So i used pointInterval instead. All graph options are working except first xAxis label which is showing repeatedly.
here is my options js:
$(function () {
$('#container').highcharts({
chart: { type: 'area'},
title: {text: null},
exporting: { enabled: false },
xAxis: {
type: 'datetime',
pointInterval: 24 * 3600 * 1000,
labels: {
padding: 0,
step: 1,
formatter : function() {
var dayStr = Highcharts.dateFormat('%a ',this.value);
return dayStr;
}
},
startOnTick: true,
endOnTick: false
},
yAxis: {
min: <?php echo $this_min;?>,
max: <?php echo $this_max;?>,
title: { text:'mmHg' }
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{showInLegend: false, name:'diastolic', data:[[1464998400, 130], [1465171200, 125], [1465344000, 120], [1465430400, 122]]}, {showInLegend: false, name:'systolic', data:[[1464998400, 90], [1465171200, 85], [1465344000, 80], [1465430400, 82]]}],
tooltip: {
formatter: function() {
var s = [];
$.each(this.points, function(i, point) {
s.push('<span style="font-weight:bold;">'+point.y +'<span>');
});
return s.join('/')+' mmHg';
},
shared: true
},
credits: { enabled: false}
});
});
I rewrote your code in jsFiddle. The timestamp [1464998400, 1465171200, 1465344000, 1465430400] that you used in series is pointing to the same date which is Jan 18 1970 and that's why your x-axis label seems repeating. Check out my modified code #line#54 and the label is working fine now.
pointInterval is no longer available in the new version of Highchart. You should use tickInterval instead.
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.
Highcharts plot offset on line graph with categories
How can I have a line graph with categories, but plot the lines in between the categories label? Is there a way to offset the plot to the beginning of the tick width?
Here is an example: http://jsfiddle.net/jMcfG/1/
I want the line to begin on the origin on the x axis, just like it would if the categories wouldn't be there.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['0', '1', '2', '3', '4']
},
series: [{
data: [0,3,2,5]
}]
});
});
You can stick you chart to the bottom using threshold property. Like this:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
},
plotOptions: {
series: {
threshold: 0
},
},
xAxis: {
categories: ['0', '1', '2', '3', '4'],
},
series: [{
data: [0,3,2,5]
}]
});
});
http://jsfiddle.net/jMcfG/5/
For x-axis this is not possible with use of an API. You will need to do some custom programming. It's a feture that centers graph if categories are present.
I did find an alternative solution which is to add an imaginary point which mirrors the first plot and then set the x axis min to 1 to cut it out, so the graph will cross the origin and will only be visible on the positive side.
http://jsfiddle.net/jMcfG/7/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
min: 1,
categories: ['-13', '0', '1', '2', '3', '4']
},
yAxis: {
min: 0,
minPadding: 1
},
series: [{
data: [-1,1,3,2,5]
}]
});
});
How to always show the plotLine in HighCharts?
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]
}]
});
});