We have an application to draw some bioinformatics images. HighCharts.js is a very good plotter. I know that we may define the tooltip by the API:
tooltip: {
useHTML: true,
formatter: function() {
return 'here the html code';
}
},
But how to add a tooltip for the customized parts? Say add a tooltip for labels here
It seems that the title field is used as a tooltip (no need for jquery-ui) :
renderer.circle(200, 150, 100).attr({
fill: '#FCFFC5',
stroke: 'black',
title:'Hello\nI am a \nmultiline tooltip',
'stroke-width': 1
}).add();
In action :
http://jsfiddle.net/Snarkturne/NYZNT/
You can't use the default tooltip of Highchart on custom objects. renderer.text, renderer.label, etc... because they return SVGObject.
The solution is to create your own tooltip. I would suggest you to use a predefined tooltip library like twitter boostrap :
// your tooltip created with bootstrap
$(".yourlabel").tooltip({
// ^^^^^^^^^^
'container': '#container',
'placement': 'top',
'title': 'Mytooltip'
});
// with
ren.label('Rasterized image', 100, 215)
.attr({
'class': 'yourlabel'
// ^^^^^^^^^
})
.css({
color: colors[1],
fontSize: '10px'
})
.add();
You can see that we link the tooltip with your custom object thanks to the class attribute. If you choose to use the twitter bootstrap tooltips, don't forget to use the container attribute. It will not work without it...
Here is a live example : http://jsfiddle.net/rttav/
And this is the documentation for twitter boostrap tooltips : http://twitter.github.io/bootstrap/javascript.html#tooltips
There is no built-in option for custom elements tooltip, however you can add your own tooltip to each element. Just use on() function, something like that:
ren.path(...).attr(...).add().on('mouseOver', function () { alert ('mouseOver!'); }).on('moueOut', function () { alert('mouseOut'); });
Related
I have a highstock chart. Is it possible to render a slider inside the chart area? There's only simple elements eg text, box etc are given in documentation.
You can use annotations to add some scrollable HTML element:
annotations: [{
labelOptions: {
...,
useHTML: true,
shape: 'rect',
formatter: function() {
return '<div class="annotationContainer"><div>Some text</div></div>'
},
y: 15
}
}]
Live demo: http://jsfiddle.net/BlackLabel/sfLum9ep/
API Reference: https://api.highcharts.com/highstock/annotations.labelOptions.useHTML
I would like to make tooltip in Highstock styled differently(not just style of content, but style for tooltip itself. For example, different padding, shadow, border radious etc) when hovering over flag series and line serieses. However, it looks like these properties needs to be configured in the tooltip configuration object. Not sure if it can be dynamically changed.
Like in this jsbin:
http://jsbin.com/cixowuloxa/1/edit?js,output
What's the better way to give 'Summer arrives' tooltip different style than other shared tooltips?
Your approach is correct. In the formatter callback wrap the text in the html tags and style it using css, inline or by class name, depending if it is a flag or line series. Make sure you set useHTML to true.
tooltip: {
useHTML:true,
borderWidth: 0,
headerFormat: '',
shared: true,
formatter: function(){
if (!!this.points) {
return this.points
.reduce(
function(prev, cur) {
return prev +
'<br>' + cur.series.name + ': '+ cur.y;
}, '');
}
return "<div style='border:5px solid black; padding: 20px'>Summer arrives!</div>";
},
padding: 0
}
example: https://jsfiddle.net/hpeq7Lbe/1/
Actually, you can set different options for flag's and line's tooltip, but not all the options are supported, e.g. padding or border width will not work - they have to be set in the tooltip's global options.
plotOptions: {
line: {
tooltip: {
pointFormat: 'line',
borderWidth: 10, // not supported
padding: 10 // not supported
}
},
flags: {
tooltip: {
pointFormat: 'flags',
borderWidth: 1, //not supported
padding: 1 // not supported
}
}
}
example: https://jsfiddle.net/hpeq7Lbe/3/
I'd like to update the red dashed line on this highchart plot using the text box and button below it. I'm stuck on how to get it to work. Right now I'm just trying to get the button press to move the line up slightly just so I can see if it's working.
http://jsfiddle.net/tZ8GM/
This is the function I'm trying to use to update it.
$("#setPtButton").click(function() {
Highcharts.setOptions({
yAxis: {
plotLines: [{
value : 68.1,
color : 'red',
dashStyle : 'longdash',
width : 2
}]
}
});
});
You should be using a combination of addPlotLine and removePlotLine.
$("#setPtButton").click(function() {
var chart = Highcharts.charts[0];
chart.yAxis[0].removePlotLine('setline');
chart.yAxis[0].addPlotLine({
value: $('#setPoint').val(),
color: 'red',
width: 2,
id: 'setline',
dashStyle : 'longdash'
});
});
Updated fiddle.
I need to disable the hover attribute of legend items because I am using Highcharts on mobile platforms. Sadly, making a legendItemClick event does not solve the problem as hovering still occurs.
I was encouraged to see that this issue came up on the old support site for highcharts back in 2011. The thread can be found here. I was particularly glad to see the last jfiddle example and the function declared in it.
Unfortunately, the only thing that worked for me was the workaround of changing the setHoverStyle to null. This isn't great though since the hover action still fires and makes navigating the legend and chart unresponsive. The rest of the suggestions in the above thread resulted in the chart not being rendered.
Granted, it might be because I had a difficult time translating the example to my purposes - honestly, I do not know where to call the function and everywhere I have tried has failed. My JavaScript file is set up along the lines of
var chartDefinition = {
chart: {
renderTo: 'chart_content',
type: 'column'
},
colors: [
'#619ED6',
'#6BA547',
'#F7D027',
'#E48F1B',
'#B77EA3',
'#E64345',
'#60CEED',
'#9CF168',
'#F7EA4A',
'#FBC543',
'#FFC9ED',
'#E6696E'
],
title: {
text: ''
},
...
column: {
shadow: false,
borderWidth: 1,
events: {
click: function() { return false; },
legendItemClick: function() { return false; }
},
dataLabels: {
enabled: false,
color: '#222',
style: {
fontFamily: 'sans-serif',
fontSize: '13px',
fontWeight: 'bold'
}
}
}
},
series: []
};
Listing and setting the various highcharts attributes.
Does anyone know how to disable this hover attribute or where the proper place would be to call the function?
There are a few solutions to implement this. There's no built-in option to change that (as of 06.2022).
Try to disable mouseover for legendGroup, not legendItem.
Demo: http://jsfiddle.net/Cp7xh/10/
Disable pointer-events in CSS:
.highcharts-legend {
pointer-events: none;
}
Demo: http://jsfiddle.net/BlackLabel/ebrodhk4/
A plugin that prevents Highcharts Core from adding events:
Plugin:
(function(H) {
H.wrap(
H.Legend.prototype,
'init',
function(proceed, chart, options) {
if (options.enableMouseTracking === false) {
this.setItemEvents = false;
}
proceed.apply(this, [chart, options]);
}
);
})(Highcharts);
Usage:
legend: {
enableMouseTracking: false,
itemStyle: {
cursor: 'auto'
}
},
Demo: https://jsfiddle.net/BlackLabel/ogqv2sya/
How to use custom content to show the grid's tooltip? I want to show the tooltio ofcoloumn 2 and coloumn 3 ,and the content is a span which id called spanid or div which is called divid?
var tooltip = $("#Grid").kendoTooltip({
filter: "td",
width: 120,
position: "top",
content: value
}).data("kendoTooltip");
I try to write this,but it seems wrong.
var tooltip = $("#Grid").kendoTooltip({
filter: "td[3n]||td[2n]",
width: 120,
position: "top",
content: divid.html
}).data("kendoTooltip");
This is a working code for my scenario, it will work tool tip for all product names with class pLink
$(".pLink")
.kendoTooltip(
{
content: kendo.template($("#toolTipTemplate").html()),
position: "top",
width: "auto",
height: "auto",
animation: {
close: { effects: "fadeOut zoom:out", duration: 300 },
open: { effects: "fadeIn zoom:in", duration: 300 }
}
});
<script id="toolTipTemplate" type="text/x-kendo-template">
<p class="tooltipProductName">#=target.data('title')#</p>
</script>
//show the tooltip
tooltip = $("#grdData").kendoTooltip({
filter: 'td:not(:first-child, :nth-child(2), :empty)',
})
this will allow you to select first column , second column and it will also filter out empty cells. You can use the nth child selector. As this is a CSS3 selector, it will work from IE9+, chrome and firefox won't be an issue.
Hope this helps !