How to set up tooltip display on top of all elements? I need to assign coordinates so that the tooltip does not close the chart, but the top block closes the tooltip.
http://joxi.ru/L21PnlgTRPVxEm
http://joxi.ru/Q2KNJ4kiL5X61m
Example: https://jsfiddle.net/qzmtp0bj/
If you want to place a tooltip outside of a chart container, enable outside option:
tooltip: {
outside: true,
...
}
Live example: https://jsfiddle.net/BlackLabel/casug0Lk/
API Reference: https://api.highcharts.com/highcharts/tooltip.outside
You can also create more space in a chart for a tooltip by setting marginTop property:
chart: {
marginTop: 150
}
Live demo: https://jsfiddle.net/BlackLabel/wj2y98ns/
API Reference: https://api.highcharts.com/highcharts/chart.marginTop
Related
I want to customize the label of the tooltip on chart js. I just want to show as bold the value of portfolio (+2,5%).
I found this example:
https://jsfiddle.net/nosensus/hhcyhjf9/
When i apply it, my tooltip is always on the left bottom, not on the chart.
How can fix it? I am using Chart.js 2.9.4 version and developing with Angular.
tooltip of the chart should be like this
Put the text you would like to be bold between these tags:
<strong>...</strong>
Like below :
tooltip: {
trigger: 'item',
formatter: '<strong>{a}</strong> <br/> {b}:{c}'
},
example
When I try to hover mouse along y-axis I observed that the tooltip is at the top but the point selected is at the bottom of the graph. This is because the point below might be the second point when we hover along the x-axis.
How do I make highcharts transverse points along the y-axis ?
Note: It is not a shared tooltip
I have tried setting the following attributes in the tooltip:
followPointer: true,
followTouchMove: true,
That is because of the default value of the findNearestPointBy option, which is 'x'. You can set it to 'y' or 'xy':
series: [{
findNearestPointBy: 'xy',
...
}]
Live demo: https://jsfiddle.net/BlackLabel/2nqdxp3z/
API Reference: https://api.highcharts.com/highcharts/series.line.findNearestPointBy
I was looking at this highchart stacked column - Highchart Demo
and I'm wondering if it's possible to have a tooltip when you mouse over the total stacked label.
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
}
}
I wanted to achieve something like this - See Image here.
Note: I wanted to have a tooltip on mouseover the Total Stacked Label not on the column series.
You can use a custom-events plugin which allows to cache events on stackLabels.
Sorry to not include a fiddle as the highchart chart is tied tight to my application. Earlier the mouse events were getting tracked over the legends as well as the legend labels . For some reason these labels does not take the events anymore, rather it goes to the container holding the charts.
Any inputs?
Also when i try to inspect the above highlighted legend label, the parent container is highlighted instead of the label itself. The above problem is seen for other labels out of the plot area as well.
You can use custom-events extension which allows to catch this event on legend item.
legend: {
itemEvents: {
mouseover:function(){
console.log(this);
}
}
},
Example: http://jsfiddle.net/Utx8g/413/
I would like my chart area to be extended on the top so I've added a negative margin to the chart. However, this causes series at times to be drawn over the contextButtons and can make them impossible to click. I'd like to just increase the z-index or do something that makes them appear above the series without having to make my own buttons that live outside the chart. Does anyone have a way to do this?
Example: http://jsfiddle.net/tu67e1ce/1/
chart: {
marginTop: -25,
events: {
load: function() {
this.exportSVGElements[0].toFront();
this.exportSVGElements[1].toFront();
}
}
},
So method toFront() will bring items on top of the SVG container. this.exportSVGElements[0]/[1] are button/symbol. Of course both of them are inner object of the Highcharts core.