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
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
I want hide tooltip and crosshair when screen resize but when I call method
this.chart.tooltip.hide();
Only tooltip hide , I dont see any method help hide crosshair.
After some fiddling around I found out that this works (for a button):
$('button').click(function() {
chart.update({tooltip: {enabled: false}, xAxis: {crosshair: false}}, true);
})
This disables the tooltip, and at the same time disables crosshair.
Note that setting tooltip: {crosshairs: false} in the update function will not do anything. Ref: tooltip.crosshairs.
crosshairs: Mixed
Since 4.1, the crosshair definitions are moved to the Axis object in order for a better separation from the tooltip. See xAxis.crosshair.
Working example: http://jsfiddle.net/q04df7wy/12/
Highcharts paints the chart as the page loads. For example when a simple bar chart is loaded, columns are painted on progressively.
Is there a way to disable this? I just want to chart as it is. No movements. I tried to set animation to false. But it does not work.
Jake He
The initial animation is hidden under a different "animation" option:
plotOptions: {
series: {
animation: false
}
},
Here's a JSFiddle using that option: http://jsfiddle.net/troygizzi/3w7noceq/
It was based on this one: http://jsfiddle.net/highcharts/VqruM/
I've got a HighChart bar chart with a whole ton of options, and it works perfectly except for one minor issue. According to all the documentation I've found, if I have a plotOptions of :
{
cursor: "pointer",
column:{
dataLabels: {
color: "#4572A7",
enabled: true,
style: {"fontWeight":"bold"}
},
inside: false,
point:{"events":{}},
stacking: 'normal',
}
}
I should get a caption above each bar in my bar chart. However, instead of appearing above each bar, these captions are being rendered in the center of the bar. I'm sure I'm just missing one key option or something, but I haven't been able to figure out what that option is ... do any HighCharts experts out there happen to know?
It turned out that the option I was missing was verticalAlign; when I added that to my dataLabels options (with a value of "top") it fixed things ... well mostly. I also had to add a y option of "-10" to actually get the labels to be above the bar.
The funny thing is, I have the code for an old version of the chart, and it didn't have a verticalAlign option at all, but it showed its labels above the bar. I guess some other option that I'm using in my version made the verticalAlign necessary.
In any case, I'm leaving this self-conversation behind in case someone else runs in to this same problem.
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/