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
- how to sort and select top 5 elements in a json array using angular JS
- Highcharts - Format overlapping scatter points in a shared tooltip
- Highcharts - Column chart customization
- Add second line to chart
- Hicharts sankey diagram error when looping
- Formatting the Highcharts multiple-axes graph's zooming effect
- HighCharts: Annotation on X axis?
- Exporting more than one HighCharts to excel
- Dynamic data in Highcharts geomaps
- PHP & Javascript Date Issue
- How to achieve linear gradient for bar graph in highcharts
- Highcharts - with datetime axis labels overlap
- Tooltip Highcharts in hybrid application
- How to show y-axis differences in highchart multi axis
- Highcharts: How can I achiveve multiple rows on chart labels?
- How to show full date to my labels and each x axis in different colour in highcharts?
- Remove padding above bar columns
- Drilldown to multiple series from different groups - Highcharter (in R)
- HighCharts draw a line in current month and year
- chart xAxis extremes change/fix
- Highcharts - Multiple pie charts from json
- How can i hide all the Series in highcharts at a time
- highcharts minPointLength do not work for unstacked bar chart
- How to make the percentage symbol smaller than the number?
- Highcharts: how to export several charts from the browser?
- highcharts get all of the minimum points of the chart
- Highcharts loading all data with xaxis simplified
- how to control orders of charts in highcharts combination charts?
- Highcharts - redraw() vs. new Highcharts.chart
- How to Change marker symbol and dataLabel with custom style in Highcharts