score:60
Tooltip positioner is much more than just default position. The function arguments contain info about your point position & tooltip dimensions, using which it should be fairly simple to position it to the right.
Highchart/stock allows you to define your alternate positioner as follows
tooltip:{
positioner:function(boxWidth, boxHeight, point){
...
}
}
Note that you have three arguments (boxWidth, boxHeight, point) at your disposal, these seem to be sufficient for most of the use cases to calculate a desired tooltip position. boxWidth and boxHeight are the width and height that your tooltip will require, hence you can use them for edge cases to adjust your tooltip and prevent it from spilling out of the chart or even worse getting clipped.
The default tooltip positioner that comes with highstock is as follows (Source)
/**
* Place the tooltip in a chart without spilling over
* and not covering the point it self.
*/
getPosition: function (boxWidth, boxHeight, point) {
// Set up the variables
var chart = this.chart,
plotLeft = chart.plotLeft,
plotTop = chart.plotTop,
plotWidth = chart.plotWidth,
plotHeight = chart.plotHeight,
distance = pick(this.options.distance, 12), // You can use a number directly here, as you may not be able to use pick, as its an internal highchart function
pointX = point.plotX,
pointY = point.plotY,
x = pointX + plotLeft + (chart.inverted ? distance : -boxWidth - distance),
y = pointY - boxHeight + plotTop + 15, // 15 means the point is 15 pixels up from the bottom of the tooltip
alignedRight;
// It is too far to the left, adjust it
if (x < 7) {
x = plotLeft + pointX + distance;
}
// Test to see if the tooltip is too far to the right,
// if it is, move it back to be inside and then up to not cover the point.
if ((x + boxWidth) > (plotLeft + plotWidth)) {
x -= (x + boxWidth) - (plotLeft + plotWidth);
y = pointY - boxHeight + plotTop - distance;
alignedRight = true;
}
// If it is now above the plot area, align it to the top of the plot area
if (y < plotTop + 5) {
y = plotTop + 5;
// If the tooltip is still covering the point, move it below instead
if (alignedRight && pointY >= y && pointY <= (y + boxHeight)) {
y = pointY + plotTop + distance; // below
}
}
// Now if the tooltip is below the chart, move it up. It's better to cover the
// point than to disappear outside the chart. #834.
if (y + boxHeight > plotTop + plotHeight) {
y = mathMax(plotTop, plotTop + plotHeight - boxHeight - distance); // below
}
return {x: x, y: y};
}
With all the above information, I think you have sufficient tools to implement your requirement by simply modifying the function to make float to right instead of the default left.
I will go ahead and give you the simplest implementation of positioning tooltip to right, you should be able to implement the edge cases based on the aftermentioned default tooltip positioner's code
tooltip: {
positioner: function(boxWidth, boxHeight, point) {
return {x:point.plotX + 20,y:point.plotY};
}
}
Read more @ Customizing Highcharts - Tooltip positioning
score:1
The better solution to get your tooltip always on the right side of the cursor is the following:
function (labelWidth, labelHeight, point) {
return {
x: point.plotX + labelWidth / 2 + 20,
y: point.plotY + labelHeight / 2
};
}
Source: stackoverflow.com
Related Query
- Highcharts tooltip always on right side of cursor
- Always showing tooltip on all columns in Highcharts
- Highcharts stacking bar chart border not displaying on right side
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Highcharts column tooltip - always on top + fit the container
- How to edit tooltip in Highcharts C# code
- how to use highcharts tooltip formatter in python code
- Highcharts menus bottom into right side of the graph
- Position Highcharts label to right side
- Highcharts SVG Export from Python Server Side Code
- extra tooltip for displaying yAxis values on right side
- Tooltip in Highcharts doesn't show the right format for Date
- Align scatter plot to right side in highcharts
- Highcharts tooltip for single series always centre. Can I force it to be left hover of the marker?
- Server-side c# and client side javascript with json loading Highcharts gantt chart Task Progress Indicator, need to change Tooltip and Label name
- Showing tooltip on right side of the column in a vertical bar chart
- Run Highcharts on Server side code to add to Word document
- Shared tooltip positioner point.plotY is always 0 in Highcharts Stacked columns
- highcharts Nested Grouping right side border missing
- Highcharts tooltip is always the same
- highcharts column graph tooltip need to close when mouseout the cursor from the graph
- Highcharts Gantt avoid tooltip closure when moving cursor outside Gantt
- How to add right side legend to US highcharts map that shows eastern states names?
- Always position Highcharts tooltip on top with respect to the marker point
- How to display precise value on tooltip on moving a cursor in highcharts
- charts highcharts add spacethe right side
- In Highcharts Make tooltip of a specific point always visible and dynamically i will change its point
- HighCharts - dynamic graph & no tick mark on the right hand side dual axis
- HighCharts - dynamic graph & no tick mark on the right hand side dual axis
- Disable highcharts tooltip on certain lines, leave it enabled on others?
More Query from same tag
- Put Rally.ui.chart.Chart charts inside a container
- Highcharts - position column chart from the top
- Limiting the Highcharts x Axis while the chart extending During Ajax Drill Down
- Highcharts datalabels Float Number including Zero after dot: x.0 not only x (exact decimals as in inputdata)
- Data format and X/Y configuration for dynamic csv display
- Is it possible to Customize highcharts drillup button
- using JSON dates with Highstock chart (asp.net MVC)
- Motion in drilldown bubble chart Highcharts
- In highcharts how do I change the color of the line above the categories?
- Conditionally show/hide Tooltip of Highcharter
- 3d High Charts Multiple Series inside of Drilldown
- Set specific spacing between rows and columns in Highcharts heatmaps
- Align X-Axis label on a straight line in Highcharts Column Chart
- Data won't echo on Highcharts
- Angular: Programatically adding multiple y-axes to highstock with navigator
- Is there a way to change the display value in series using highcharts
- Javascript - Convert timestamp into milliseconds for Highcharts Y axis
- how to pull json data from a server/url and set equal to a variable?
- Display series stack label on chart
- Highcharts funnel graph constructor
- Highcharts: locating column group information on mouseover
- How do I set more than one y-axis coordinate on one chart in HighCharts?
- Highchart dual y-axes with same base and smaller tickinterval
- using replace to produce javascript code, django
- blank page highchart in using jquery to call json arrary
- How to define Histogram categories/intervals
- Animate change in piechart start angle with highcharts-ng
- Add average to highchart dynamically by zoom level for every series on chart
- Highcharts v7.1.2 width scaling issue when using css transform scale
- Not showing x-axis label in lower configuration