When I click on first pie on the page, the second appears, but then I cannot do anything with the first - highcharts

Like stated in the title, I got the problem when I click on some slice of pie. I call function, which displays hidden div with the second pie. It appears correctly, but then I cannot click on that first pie and even tooltips are not displaying. And the second pie is all black, but that is the lesser problem, I think... Thanks for advices in advance!

Here's your fiddle with my changes: jsFiddle.
To fix hover and click events on first chart, I've deleted position: relative of second container.
To fix issue with black colors, I moved colors declaration into Highcharts.Chart({...}). Otherwise, you'll re-rewrite Highchart colors while creating the second chart.

Related

Highcharts crosshair event

I am using the "Custom Events" highchart plugin by Black Label, to detect right click in my chart. My goal is to use the right click in the chart as "Back" button when drilling out from my custom data. I know highchart has drilling options embedded, but this is a highly custom application, and my problem is that I need a way to detect right click on the x-axis crosshair line.Since the crosshair is following the mouse, 90% percent of the right clicks is triggered on the crosshair line itself, and I can not manage to detect that click. I need the event to be catched inside highcharts, because there is multiple charts on my page, and I need to know which chart was clicked on, and on what point.
I hope you understand my explanation and problem.
BR,
Benjamin Kruger

Is there a Z order value, for clicks on Highcharts tooltips?

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

How to ignore hidden series when clicking on a legend using highcharts?

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

highcharts context menu hidden for small charts

I am migrating a dashboard type screen to highcharts and would like to use the default context menu (for exporting various image formats and printing the chart).
The problem is that a lot of these charts are small gauge type charts and the context menu gets hidden when charts get below a certain size, mainly due to the fact that the context menu appears above the button for small charts size.
Is there anyway to make the context menu always appear below the button? I know I can limit the options and this will solve the problem but I would ideally like to use the default options list. Also I don't really want to have to calculate positions and move it myself.
See jsfiddle
see code at jsfiddle
Add the following styles to the context menu.
.highcharts-contextmenu {
bottom: auto !important;
top: 5px;
}
FIDDLE
Not sure if it would work for your situation, but have you considered using their pie chart with the legend at the bottom?
http://www.highcharts.com/demo/pie-legend

how to create simple schedule chart with highchart

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.

Resources