We Keep Coding

ChartJS doughnut legend click

I have a problem with custom onClick function on doughnut chart.
The only thing I need is to override default legend onClick function calling the original one + my custom code.
Following their official documentation and this suggestion on github page I wrote this js
var defaultLegendClickHandler = Chart.defaults.doughnut.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
console.log(legendItem);
defaultLegendClickHandler.call(this, e, legendItem);
};
Then I associate it to the onClick option (JSfiddle here) but it is not working. It seems that the legendItem variable is always an empty array so the default click function does nothing.

Your JSfiddle looks fine except that the newLegendClickHandler is defined at the wrong place inside options. You should define it inside legend as follows.
legend: {
position: 'top',
onClick: newLegendClickHandler
},
Please also check Custom On Click Actions from Chart.js
documentation

The click handler was set to the chart itself and not the legend. Move the new onClick handler inside of the legend options.
var options = {
cutoutPercentage: 20,
responsive: true,
legend: {
position: 'top',
onClick: newLegendClickHandler,
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
};

tippy tooltip position with browser zoom in/out

I have made a popover with tippyjs. Tippy takes next options:
const tippyInstance: any = tippy(element, {
content: loaderTemplate,
placement: 'right',
animation: 'fade',
animateFill: false,
theme: 'kpi-tooltip',
trigger: 'manual',
interactive: true,
onHidden: () => {
tippyInstance.destroy();
},
allowHTML: true
});
"Element" is a plain html element and content loading after response from server. The problem is when i make browser zoom in or zoom out the tooltips changes position. I'm using chrome last version.
Tooltip in normal state:
Tooltip with zoom in:

"appendTo" property option solved the problem.

adding div to openseadragon Toolbar is not working [Openseadragon]

when I add the tollbar(as in this example: http://openseadragon.github.io/examples/ui-toolbar/) properties I get an error
Cannot read property 'appendChild' of null
I just want to add a div to the buttons to controlling their margin/padding
var viewer1 = OpenSeadragon({
id: "mainImage",
maxZoomPixelRatio:6,
toolbar:"toolbarDiv",
panVertical: false,
defaultZoomLevel: 0.75,
minZoomLevel: 0.75,
visibilityRatio: 1,
preserveViewport:true, /
preserveImageSizeOnResize : true,
prefixUrl: "img",
});

As mentioned in https://github.com/openseadragon/openseadragon/issues/1140: Do you have an element on your page with the id toolbarDiv? If not, you'll get that error.

Google Maps Polygone "clickable: false" shows no effect

I'm working with the google maps API-v3. I'm adding a polygone to my map and a bunch of Polylines. These lines are usually located within the area of the polygones. This looks like so:
I disabled the click-event on the polygone:
let mapPolygone = {
id: currentPolygone.Id, //currentPolygone is just a wrapper
path: path,
stroke: {
color: currentPolygone.LineColor,
weight: currentPolygone.LineWeight
},
fill: {
color: currentPolygone.FillColor,
opacity: currentPolygone.Opacity
},
editable: false,
draggable: false,
geodesic: false,
// I disabled the click
clickable: false,
visible: true,
}
I registered a click-handler on the polyine:
let mapPolyline = {
// currentPolyline is also a wrapper
id: currentPolyline.Id,
path: path,
stroke: {
color: currentPolyline.LineColor,
weight: currentPolyline.LineWeight
},
strokeOpacity: 1,
editable: false,
draggable: false,
geodesic: false,
clickable: true,
visible: true,
icons: this.getIcons(currentPolyline), // generates a standard GMap-Arrow
events: {
//Here goes the click event. Doing stuff on
click: (polyline: any) => {
this.$scope.polyLineClicked(currentPolyline.Id);
}
}
}
What I expect from google, and from another thread, is that the polygone ignores the click and whathever element is below the polyline gets the click.
However, this is not the case. I still get the click-cursor when being above the polygone
and it still gets the click.
The order of drawing polylines/polygones happens in random order. Sometimes the line is clickable (when painted above the polygone), but usually it's not.
Is there any way to get this working without coming up with custom overlays and things like that?
Am I missing something here?
Thank you folks in advance!

Alright, preparing the MWE, recommended by #duncan did the trick.
I'm using the angular-google-map package, which provides an angular wrapper for the Google Maps API.
Polylines and Polygones are being passed to a directive:
<ui-gmap-google-map center='map.center'
zoom='map.zoom'
options="map.options"
aria-label="Google map"
control="map.control"
events="map.events"
refresh="refresh">
<!-- Polylines-->
<ui-gmap-polyline ng-repeat="p in mapPolylines"
path="p.path"
stroke="p.stroke"
visible="p.visible"
geodesic="p.geodesic"
fit="true"
editable="p.editable"
icons="p.icons"
draggable="p.draggable"
events="p.events">
</ui-gmap-polyline>
<!-- Polygones -->
<ui-gmap-polygon ng-repeat="p in mapPolygones"
path="p.path"
stroke="p.stroke"
fill="p.fill"
visible="p.visible"
geodesic="p.geodesic"
fit="true"
editable="p.editable"
draggable="p.draggable"
events="p.events">
</ui-gmap-polygon>
</ui-gmap-google-map>
I missed adding the "clickable" attribute to the ui-gmap-polygon tag. When adding this snipped to the tag, everything worked like a charm:
clickable="p.clickable"
Thank you guys anyways.

For poly* stack ordering, you could also use the zIndex property, which specifies "The zIndex compared to other polys". The angular-google-maps package also provides the option to set the zIndex attribute.

How to display a multi-line title in a Highslide pop-up while using Highcharts?

I'm using Highcharts to display a chart and I'm using Highslide to display additional information in a pop-up when the user clicks on a point in the chart. However, I want to add additional information to the title/heading-text in the pop-up.
I've gotten Highslide to work in displaying basic information using the following code:
$(function () {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
}
credits: {
enabled: false
}
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: []
}
});
I've read through the API for Highslide and saw that you could use the 'heading' variable with the 'Expander.prototype.onAfterGetHeading' function, which I've displayed below, but I'm not sure how to implement it with Highcharts.
hs.Expander.prototype.onAfterGetHeading = function () {
this.heading.html = 'this.a.title';
}
HERE's a site that displays a pop-up with a multi-line title in a Highslide pop-up, as an example. However, keep in mind that I'm trying to implement this in Highcharts, possibly with dynamic text in the title.
Thanks.

Here’s a solution you can use with Highcharts: http://jsfiddle.net/roadrash/gd3xz/
Please note that this is the correct code to insert the anchor's title text in the heading, as an additional heading text:
hs.Expander.prototype.onAfterGetHeading = function (sender) {
if (sender.heading) {
sender.heading.innerHTML += this.a.title;
}
};
I’m not familiar with Highcharts, but I don’t think you can use this.a.title since a refers to the anchor tag. You can of course insert something else than this.a.title with the above code, as I've done in my demo.