Legend overlapping on drilldown pie chart - highcharts

I am using Highcharts drill down pie charts with a bottom legend. Upon drilldown, the legend overlaps and when reverting one level back, it even gets worse.
This is happening even on the Highcharts demo chart. Look at this example - click on Chrome or any other element to see the problem - https://jsfiddle.net/2679a3ru/1/.
Is there a setting that I am missing?
Highcharts.chart('container',{chart:{type:'pie'},title:{text:'Browsermarketshares.January,2018'},subtitle:{text:'Clicktheslicestoviewversions.Source:statcounter.com'},accessibility:{announceNewData:{enabled:true},point:{valueSuffix:'%'}},plotOptions:{pie:{showInLegend:true,},series:{dataLabels:{enabled:false,format:'{point.name}:{point.y:.1f}%'}}},tooltip:{headerFormat:'<spanstyle="font-size:11px">{series.name}</span><br>',pointFormat:'<spanstyle="color:{point.color}">{point.name}</span>:<b>{point.y:.2f}%</b>oftotal<br/>'},series:[{name:"Browsers",colorByPoint:true,data:[{name:"Chrome",y:62.74,drilldown:"Chrome"},{name:"Firefox",y:10.57,drilldown:"Firefox"},{name:"InternetExplorer",y:7.23,drilldown:"InternetExplorer"},{name:"Safari",y:5.58,drilldown:"Safari"},{name:"Edge",y:4.02,drilldown:"Edge"},{name:"Opera",y:1.92,drilldown:"Opera"},{name:"Other",y:7.62,drilldown:null}]}],drilldown:{series:[{name:"Chrome",id:"Chrome",data:[["v65.0",0.1],["v64.0",1.3],["v63.0",53.02],["v62.0",1.4],["v61.0",0.88],["v60.0",0.56],["v59.0",0.45],["v58.0",0.49],["v57.0",0.32],["v56.0",0.29],["v55.0",0.79],["v54.0",0.18],["v51.0",0.13],["v49.0",2.16],["v48.0",0.13],["v47.0",0.11],["v43.0",0.17],["v29.0",0.26]]},{name:"Firefox",id:"Firefox",data:[["v58.0",1.02],["v57.0",7.36],["v56.0",0.35],["v55.0",0.11],["v54.0",0.1],["v52.0",0.95],["v51.0",0.15],["v50.0",0.1],["v48.0",0.31],["v47.0",0.12]]},{name:"InternetExplorer",id:"InternetExplorer",data:[["v11.0",6.2],["v10.0",0.29],["v9.0",0.27],["v8.0",0.47]]},{name:"Safari",id:"Safari",data:[["v11.0",3.39],["v10.1",0.96],["v10.0",0.36],["v9.1",0.54],["v9.0",0.13],["v5.1",0.2]]},{name:"Edge",id:"Edge",data:[["v16",2.6],["v15",0.92],["v14",0.4],["v13",0.1]]},{name:"Opera",id:"Opera",data:[["v50.0",0.96],["v49.0",0.82],["v12.1",0.14]]}]}});

It is a bug which is already reported and fixed.
Link for more information: https://github.com/highcharts/highcharts/issues/12627
It works fine on the master branch, see: https://jsfiddle.net/BlackLabel/cym534k7/
<script src="https://github.highcharts.com/master/highcharts.js"></script>
<script src="https://github.highcharts.com/master/modules/drilldown.js"></script>

Related

Tippy.js does not keep position when content is zoomed

I'm using Tippyjs for a simple tooltip on hover. It works fine when no zoom is set.
I'm using Chromium and when I set the browser zoom to 150% the tooltip gets displaced.
I haven't used Tippy before but I thought it would be fairly standard for a library like this to accommodate zoom.
I've tried searching on SO and looking at the manual.
Answer was remarkably simple: add <!DOCTYPE html> at the top of the html page.
See: https://popper.js.org/docs/v2/faq/

Using pickadate.js with Highcharts - event binding problem

I am trying to use pickadate.js with highcharts.
It does work, but it requires clicking twice. It looks like highcharts first renders the date in a text svg element and there is accompanying input element that is 1px x 1px. When you click on the text SVG, it is replaced by the input element. Then you click again, and the pickadate opens.
I have tried binding pickadate to the g/text element via $(g.highcharts-range-input).pickadate(), but that doesn't work.
I have also tried using the input.onFocus event to trigger an input.onClick event, which works but then sometimes it goes through two click cycles- causing pickadate to open then immediately close:
$('input.highcharts-range-selector').bind("focus", function() {
console.log("focus");
$('input.highcharts-range-selector').trigger("click");
});
Fiddle:
https://jsfiddle.net/04svbnfd/
Thanks
Matt

How to obtain an always fixed header in jQuery Mobile?

I have implemented a fixed header in jQuery Mobile, and it's working great for the most part. When I scroll, the toolbar remains visible. When I tap the screen, the header does not disappear. Great. The only annoyance I see is that when you tap into an input field that's towards the bottom of the page, the header then reverts to position:static so it disappears. You can see that by scrolling back up to the top. Once you unfocus the input box (hit done on the keyboard), then it goes back to position:fixed. I would like it to always be visible no matter what.
<div data-role="header" data-position="fixed">
I'm using jQM 1.4.0 RC1 and in the change log it states:
- Fixed Toolbars are now an extension on the toolbar widget
Sounds relevant, but I'm not sure what exactly that means.
Thanks. :)
This actually a fix for many issues raised on fixedtoolbar widget.
Issue #4410
Issue #4724
jQM hides fixed toolbars once focus is triggered on select, textarea and select; to give more working place when screen width less than 1025.
I have tried the below solution but the results were ugly.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.toolbar.prototype.options.hideDuringFocus = "";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
For more details, check fixedToolbar.js widget on GitHub, go to line 243.
Demo (1)
(1) To be tested on Mobile browsers, not desktop.

HighChart exporting from IFrame

I am displaying HighChart in a page and showing this page in a Iframe.
But I am unable to export the chart from the page which has iframe.
If I open the highchart page seperately, I am able to export the chart.
What is the issuue?
I tried so many searchs
May see this Fiddle
EDIT:
In the html page linked with the iframe, make sure you have something like this-
i.e. For the index2.html , check this Fiddle

Gaps under tabs using JQuery UI in Firefox

I have been using JQueryUI for various aspects of my site, and a small tabbed menu set was working well, except in firefox. The image below shows the same code rendered in firefox on top, and IE9 below. Note the gap under the tabs and the (possible?) increase in padding inside the tab. I have removed all my stylesheets from the site (the 2nd image) leaving just the base JQuery UI one, but the gaps still appear, and only in firefox.
The js call is as basic as it can be:
$("#menuTabs").tabs();
It's not often I have display issues where IE is better than firefox... Having removed all the CSS I generated, and made sure there's no styles being applied, I'm at a loss as to where to look next!
If you can offer any suggestions as to what might be causing it, I'd be a happy chappie!
[EDIT]
After scaling back the code as far as I could, and using only 'known good' libraries, it turns out that it is caused by it being in a table cell!
Here's some code you can have a play with! http://jsfiddle.net/XVHTk/
It does however work when "Normalized CSS" is checked, so it could be padding inherited from the cell maybe?
[EDIT #2]
Right.
So.
It turns out that CSS styles applied to a table to remove padding and margins and borders and so forth are not enough. You have to include cellpadding="0" and cellspacing="0" in the table definition otherwise the jQuery tabs have some extra padding around them.
Odd.
jsFiddle with table and no extras: http://jsfiddle.net/XVHTk/1/
jsFiddle with table spacing/padding stripped: http://jsfiddle.net/XVHTk/2/
Why the HTML cell properties are being transferred into the tabs, I have no idea. I'm just happy to have fixed it!
This is caused by a bug in the ui-helper-clearfix class. See ticket #8442 and the associated fix. As you can see from the ticket, this was fixed in 1.10.1. I've created a fiddle showing this working properly with 1.10.1 and using 1.8.x with additional CSS to fix the issue. The latter shows that if you can't upgrade to 1.10.1+ right now, you can just include the following CSS:
.ui-helper-clearfix:after {
border-collapse: collapse;
}

Resources