Does anyone know if this can be done in Highcharts ?
display custom tooltip in every column, something like:
if {point.x} = January show something in tooltip
if {point.x} = February show other thing in tooltip
.
.
thanks
Related
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
I have a charts done in highcharts in which I show and hide series depending on a checkbox (if the user clicks on a checkbox and all series are shown, if he unchecks the checkbox, some series are hidden).
It is working great.
Now I have an issue with the legends in the chart: if the series are hidden and the users enables a legend, the segment of all series (hidden or not) are shown in the chart.
I would like to handle the click item so I only handle series that are being shown.
To do that, I created an eventhandler for the legendItemClick event.
Inside it, I am able to access the legend (using this) but I am only able to call functions in a legend level, affecting all series. Is there anyway I could get to a series level?
Thanks!
Edit: created a jsfiddle as an example: http://jsfiddle.net/JLkGm/1/
Steps to reproduce:
1- unmark the checkbox
2- click twice in john + joe
Note that the segment related to Jane + Janet will show up
I would like to prevent this segment from showing if the checkbox is not checked.
ps: sorry for the js code in the checkbox event handler, we are using coffeescript, the original code was this one
toggleCompareData: (toggle) ->
columnName = COLUMN_HIGHCHARTS_TOKEN + #secondaryPrefix
if toggle
for serie in #chart.series
serie.show() if serie.stackKey is columnName
else
for serie in #chart.series
serie.hide() if serie.stackKey is columnName
It looks like bug, reported to our developers here: https://github.com/highslide-software/highcharts.com/issues/3309
I'm developing a chart that have 2 splines and 2 scatter. I use the default tooltip formatter to exhib a tooltip based in the spline data. But when I hover a scatter despite I hide the default tooltip, before show the scatter one, it appears to have triggered again.
How can I prevent the default tooltip to be triggered?
ps: im using Highcharts 3.0.1
EDITED: I tried "chartObj.tooltip.enabled = false" but it didn't work.
If you don't want to show the tooltip for a particular serie in the chart, see if setting
enableMouseTracking: false
on you desired serie's properties does it.
Hope this help.
I solved using this code:
chartObj.tooltip.options.enabled = false;
Setting to "false" when I hover and to "true" on mouseout.
How do I create a simple chart with a single horizontal bar. Xaxis is time and yaxis is one category named execution. I want to show a chart that shows a bar during the times when I have state executing and for states in between I want to display a blank in the same horizontal bar.
What you are looking for, I think, is a Gantt chart. Check out this example: http://jsfiddle.net/highcharts/KNGba/. It is a basic chart with just one element. Now check out this one: http://jsfiddle.net/highcharts/r6emu/. This shows you events during a time line.
How can I add tooltips for all cells in one column for instance? I'm using a jmesa table.
I need this because in the cells i've got text like this: 'this is the ...'. On hover I need to display a tooltip with the complete text.
Use a SPAN tag with a TITLE attribute to show the tooltip:
<jmesa:htmlColumn>
<span title='${bean.fullDescription}'>${bean.value}</span>
</jmesa:htmlColumn>