On Highcharts graph, can we show a tool tip when mouse over label
other tool tip than shown when mouse over columns (point)?
thanks
Chanan
I've managed to achieve this - you need two steps:
1.) For the xAxis or yXis, set the labels options; the 'formatter' property should include a html title attribute. Utilise a function for dynamic outputs. Ensure the 'useHTML' property is set to true. eg:
useHTML: true,
formatter: function () {
return '<div class="label_tip" style="font-size:12px; font-weight:500;" title="'+this.value+'">'+this.value+'</div>'; }
2.) Use any tooltip library to alter the titles to a tooltip. This should be triggered in the Highcharts load or redraw event.
In this example I'm using qTips to create the label tooltips - http://jsfiddle.net/amichaels/quXLg/
Related
I have a multi-series column chart in Highcharts with three series ("Western", "Eastern", and "Central"). Clicking the label of a series in the legend shows or hides the series. I'd like to add a little link at the end of each label with a link to download details about the underlying data for that series.
So a label would look like: Western (details)
I tried simply adding an <A> link to the "name" of the series, and the link appears, but clicking on it doesn't open the link. Instead, it merely toggles the series display as before. I guess the "onClick" event for the label itself supersedes the <A> behavior.
Is there any way, without hacking Highcharts or creating a whole custom legend, to make a link in a series label functional? Maybe something with CSS to make the link jump out of its parent element?
Your idea is very good. You need to only call e.stopPropagation() after click on a link to prevent toggling series.
Highcharts.chart('container', {
series: [{
name: 'Series name <a id="seriesDetails" href="https://www.google.pl/">Details</a>',
...
}]
});
document.getElementById('seriesDetails').addEventListener('click', function(e) {
e.stopPropagation();
// prevent redirect
//e.preventDefault();
console.log('click');
});
Live demo: http://jsfiddle.net/BlackLabel/kaLrmjd7/
API Reference: https://api.highcharts.com/highcharts/series.line.name
https://www.highcharts.com/demo/column-stacked
Highcharts is a JS API that allows you to easily generate bar charts. The above link shows a Highchart stacked column table. The bars show some information in a tooltip when you hover on them. Highchart allows us to control the delay of the tooltip with this JS parameter hideDelay: number but there is no such parameter to hold the tooltip when you hover on it.
What I want is to make the tooltip stay even when I hover on it. Tooltip only stays when I hover on the bars and disappears a few minutes after I take my cursor away from the bar.
Set plotOptions.series.column.stickyTracking to true.
plotOptions: {
column: {
stacking: 'normal',
stickyTracking: true
}
},
jsFiddle
API Reference: https://api.highcharts.com/highcharts/series.column.stickyTracking
We use highcharts to display different types of data. It all works fine.
Now, our goal is to add a call out functionality.
The callouts should be added to very specific instances wherever the hikes in the points are found.
I saw this example
Adding call outs to a Highcharts - Stacked Bar
but this adds callouts for all the points. As per my use case, I need add callouts only for John as per the above example.
You can use Pawel's solution from similar topic: Adding call outs to a Highcharts - Stacked Bar
You can add if statement inside your dataLabels formatter to check if your dataLabel is connected with specific series. Then you can show the callout or remove label, depending on the series name.
formatter: function() {
return this.series.name === 'John' ? '<div class="callout top" data-name="Jane">Callout for John!</div>' : false;
}
Here you can find an example how it can work: http://jsfiddle.net/5joufkwa/30/
I have the following problem:
I would like to align the text of the legend in the following way:
Legend:
[Color1] Title1:---------------100.000.000€
[Color2] Title23343334:-----100.000.000€
[Color3] Title23343334:------10.000.000€
Do you know how can I do that?
For this you need to set useHTML: true, and define html elements in the labelFormatter function, and set the widths of those elements via CSS.
Example:
http://jsfiddle.net/jlbriggs/yra1rw51/
(there are numerous ways to set up the HTML and CSS to accomplish this - this is just one example)
You can define itemWidth which define static with of each legend item.
I am noticing something strange; I have a click event on a chart, and the chart fire up the event no problem.
Then I add a link in the tooltip, but when I click on it; the chart event fire, not the one that should open the link.
It works only if the tooltip will render on an area that is not part of the plot area (say, a value is high enough to render a tooltip on the title bar; if I click on that link, it will work).
I suspect that there is some sort of parameter that tell highcharts if the link in the tooltip is above the chart plot area? Otherwise it is impossible to have the tooltip open a link, if the highcharts click event is enabled.
You need to set useHTML flag as true.
Code: http://jsfiddle.net/sbochan/voh6ebt8/
Example: http://jsfiddle.net/sbochan/voh6ebt8/show