I have a line chart, with these bits of code:
tooltip: {
formatter: function() {
var tmp = '<b>'+this.series.name+'</b>';
return tmp;
}
}
and
states: {
hover: {
lineWidth: 8
}
}
}
And by and large, it works perfectly.
But if two lines share a point (they both pass through x = 0, y = 4, for example), and the mousecursor is closer to that point than the next ones along the lines, then the tooltip always returns the first series name, rather than that of whichever line is currently highlighted by hovering over it.
Is there a simple fix?
Replace the line type series with the scatter and declare lineWidth:2 param. Then set stickyTracking as false.
Related
I have added some function into my graph and all of them work
separately, but after i changed marker style and then change the line color the graph disappear.
the code looks like this:
function(chart){
$('#colorchange').click(function() {
chart.series[0].update({color:document.getElementById("selectcolor").value});
});
$('#stylechange').click(function() {
chart.series[0].update({dashStyle: document.getElementById("selectStyle").value});
});
$('#pointchange').click(function() {
var l = chart.series[0].points.length;
var p = chart.series[0].points;
for(var len = 0; len < l; len++) {
p[len].update({
marker: {
symbol: document.getElementById("selectpoint").value,
}
}, false);
}
});
}
I am not sure why it is happening but I have found a work-around and with it a possible reason :-)
I suppose that when you call p[len].update({...}) without specifying the x and y values these values get lost. Therefore when you are calling chart.series[0].update the points itself are erased. What makes me wonder is that the points are only erased after the update of the series and not after setting the new marker. Maybe highcharts has some sort of cache that is only rebuild when the series is updated.
A quick fix for your problem is to manually set the x and y properties to their old values when updating the points:
p[len].update({
x: p[len].x,
y: p[len].y,
marker: {
symbol: document.getElementById("selectpoint").value
}
}, false);
See http://jsfiddle.net/doc_snyder/2wwzgz0p/1/ for a working example. If you remove the lines where the x and y values are set the line disappears after setting the color, just like you experienced.
I'm eager to find out if its possible to place last value in series to yAxis in highcharts.
It supposed to be simple label with last point value shown on the right side of the charts, dinamically chanhing when we add points to the chart.
thanks!
There are probably several methods.
One that I would use can be seen in this example:
http://jsfiddle.net/jlbriggs/zXLZA/
data: [7,12,16,32,{y:64,dataLabels:{enabled:true}}]
This makes use of the datalabels, which are enabled only for the last data point.
The downside to this is that you need to specify that in your data. Not hard to do, but may not fit your needs.
Another way would be to use a second y axis, and the tickPositions property:
http://jsfiddle.net/jlbriggs/zXLZA/4/
Another possible solution is to use tickPositioner with second yAxis. In such case with dynamic data, everything will be computed itself, see: http://jsfiddle.net/3c4tU/
tickPositioner: function(min,max){
var data = this.chart.yAxis[0].series[0].processedYData;
//last point
return [data[data.length-1]];
}
to get the highest value in any axis and series, use the function getExtreme(). It will find you the extreme value (highest or lowest depending of the argument you put behind). Select the chart, the axis and the series before.
here's an example: (whith your chart associated to the variable 'yourChart')
var highestValue = yourChart.yAxis[0].getExtremes().dataMax;
It will return the highest value of the first Y-axis' associated series.
While this below will return the lowest of the second X-axis' associated series:
var lowestValue = yourChart.xAxis[1].getExtremes().dataMin;
My recommended solution:
plotOptions: {
areaspline: {
fillOpacity: 0.2,
dataLabels: {
enabled: true,
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA',
y: -6,
formatter: function() {
if (this.x == this.series.data[this.series.data.length-1].x) {
return this.series.name + ': '+this.y;
} else {
return null;
}
}
}
}
}
we can make use of formatter for this
here is an example to display the last value
http://jsfiddle.net/kgNy4/1/
here is an example to display maximum value
http://jsfiddle.net/kgNy4/
In the example I have put
dataLabels: {
enabled: true
}
so that formatter function will be executed
I hope this will be useful for you
I have a Highcharts line graph that has dataLabels configured in the plotOptions. This is all working well and I have a nice label displayed over each point.
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
return '$' + Highcharts.numberFormat(Math.round(this.y),0,0,",");
}
}
}
}
However, is there a way to set an interval that determines how often the dataLabels appear over the points? I want to show every point in my graph, but due to space constraints, only show the dataLabel every 2 or 3 points.
Edit:
Difficulty level: My graph has multiple y-axes, uses datetime for the x-axis, and has irregular data.
http://jsfiddle.net/SQkMW/68/
Yes, you could just return a blank string if the point x mod 2 is 0, for every 2nd to show up, for example (http://jsfiddle.net/HzYtV/):
formatter: function() {
if(this.point.x % 2 == 0) return '';
return this.y +'mm';
}
For datetime axis you will have to create a variable and increment it manually http://jsfiddle.net/SQkMW/69/
I'm pretty clueless at this point, on some of my charts I am giving these options:
var plotOptions, yAxis;
plotOptions = {
series: {
compare: 'value'
}
};
yAxis = {
labels: {
formatter: function() {
return this.value;
}
},
plotLines: [
{
value: 0,
width: 2,
color: 'silver'
}
]
};
And the chart still displays percentages in the y-axis, just without the % sign. I did a console.log of 'this' in the formatter tag, and the value attribute is correct (that is, returning the value instead of a percentage, but it doesn't seem to be applying it to the chart. Any thoughts?
I actually just ended up using a spline chart instead. Basically what I was trying to say was that the y-axis was displaying the same values where I used "compare: 'percentage'" or "compare: 'value'", but the spline chart seems to be rendering the labels as the actual data points (4000 as opposed to 25%).
Using this example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
When you hover over points on the chart, you get a nice vertical line showing you which point you're currently on. I want to modify the click event so that the vertical line stays when I hover away after a click. Changing the line color would be ideal on click, but not necessary.
If I click another point I'd want to remove any previous lines. Any ideas on how I could accomplish this?
The above solution like I said, is really cool, but is kind of a hack (getting the path of the crosshair) into the implementation details of highcharts, and may stop working in future releases, may not be totally cross browser (esp since <IE8 do not support SVG, the adding path may still work as it should be handled by highchart's add path method, but getting the crosshair's path may not work, I may be wrong, am an SVG noob). So here I give you the alternate solution of dynamically adding plotLines. PlotLines also allow some additional features like dashStyles, label etc.
get the axis and x value of point clicked (may not exactly overlap the crosshair)
var xValue = evt.xAxis[0].value;
var xAxis = evt.xAxis[0].axis;
Or
EDIT If you want to have the plotLine at the location of the crosshair and not the click position, you can use following formula (No direct API to get this, obtained from source code hence may stop working if code changes)
var chart = this;
var index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft;
var xValue = chart.series[0].tooltipPoints[index].x;
Add plotline
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
You can cleanup existing plotline
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
OR
try {
xAxis.removePlotLine(myPlotLineId);
} catch (err) {}
Putting the pieces together
var myPlotLineId="myPlotLine";
...
var chart=this;
index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft;
var xValue = chart.series[0].tooltipPoints[index];
// var xValue = evt.xAxis[0].value; // To use mouse position and not crosshair's position
var xAxis = evt.xAxis[0].axis;
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
...
Add plot lines at click position # jsFiddle
Persist crosshair/cursor as plot lines on click # jsFiddle
You can do it in several ways
Highchart has a very cool renderer that allows you to add various graphics to the chart. One of the options is to add a path I will be illustrating the same here.
We shall reuse the path of the crosshair and add the same to the chart with some additional styles like color you mentioned. The path of the crosshair can be optained as this.tooltip.crosshairs[0].d this is in string form and can be easily converted to an array using the Array.split() function
click: function() {
this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
'stroke-width': 2,
stroke: 'red'
}).add();
}
This will accomplish adding the line. You can store the returned object into a global variable and then when you are about to add another such line, you can destroy the existing one by calling Element.destroy()
var line;
...
chart:{
events: {
click: function() {
if (line) {
line.destroy();
}
line = this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
'stroke-width': 2,
stroke: 'red'
}).add();
}
}
...
Persist tooltip / crosshair on click # jsFiddle
Assuming you don't have much meta data to be shown along with the line, this is the easiest (or the coolest :) ) approach. You can also attach meta data if you want to using the renderer's text object etc.
An alternate way could be adding vertical plotLines to the xAxis
UPDATE
Refer my other solution to this question, that would work with zoom,scroll,etc