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
- Issue in Ordering of JavaScript libraries
- C# Parse string into arrays for HighCharts
- If over 300 values data disappears when zooming
- highcharts line-ajax example/demo
- Highcharts: having trouble recreating stacked area chart from Excel with positive and negative values
- highchart autoupdate(addpoint) cause corrupted chart view
- Highcharts: Column Chart Select State Fill Color
- How to prevent highcharts smoothing my data?
- Format data to parse to a highcharts pie chart
- how do you create highcharts bar chart
- High charts Donut Chart not rendering
- How to add class name for each columns of highcharts?
- Firebase data not plotting in HighCharts
- use image to fill bars in highchart?
- Highcharts missing information in scatterplot CSV/XLS export
- Highchart is not resizing dynamically when used as a angular directive
- HighCharts Hide specific context Menu items
- Display maximum value of a highcharts stacked column on the bottom
- How to set multiple colors in one series in highchart
- Dynamically add an average line in highchart in angular
- Spider Chart (High Chart) in rails with Prawn PDF How to generate?
- How to customize graph title and subtitle
- highcharts endOnTick option showing unspecified value on axis
- Highcharts: Show navigator range in subtitle
- Highcharts add symbol on tooltip when over 100 or 1000
- To create piechart in highcharts
- One series name in higcharts not getting populated even though json send the correct information
- How can I draw a plot in negative y direction in HighCharts?
- Set background color to HighChart xAxis labels
- Highcharts minimum value for area charts y-axis