Highcharts v5.0.10: Unclipped symbols in meteogram sample

[TorsteinHonsi]

Expected behaviour

Clipped sprites

Actual behaviour

Sprites from number 10 and up are not clipped

Live demo with steps to reproduce

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-meteogram/

Regression since dcd3737

[zainrafique]

I am still getting this problem. Can you please tell me what is the expected time of next release?

[zainrafique]

I am still getting this problem. Can you please tell me what is the expected time of next release?

[TorsteinHonsi]

It should be released within two to three weeks. In the meantime, here's a drop-in fix that you can use for v5.0.10. View it live on jsFiddle.

// Drop-in fix for Highcharts issue #6550, requires Highcharts v5.0.10.
(function (H) {
	var each = H.each;
	/**
	 * Destroy the element and element wrapper and clear up the DOM and event
	 * hooks.
	 *
	 * @returns {void}
	 */
	H.SVGElement.prototype.destroy = function () {
		var wrapper = this,
			element = wrapper.element || {},
			parentToClean =
				wrapper.renderer.isSVG &&
				element.nodeName === 'SPAN' &&
				wrapper.parentGroup,
			grandParent,
			ownerSVGElement = element.ownerSVGElement,
			i;

		// remove events
		element.onclick = element.onmouseout = element.onmouseover =
			element.onmousemove = element.point = null;
		stop(wrapper); // stop running animations

		if (wrapper.clipPath && ownerSVGElement) {
			// Look for existing references to this clipPath and remove them
			// before destroying the element (#6196).
			each(
				ownerSVGElement.querySelectorAll('[clip-path]'),
				function (el) {
					// Include the closing paranthesis in the test to rule out
					// id's from 10 and above (#6550)
					if (el.getAttribute('clip-path')
							.indexOf(wrapper.clipPath.element.id + ')') > -1) {
						el.removeAttribute('clip-path');
					}
				}
			);
			wrapper.clipPath = wrapper.clipPath.destroy();
		}

		// Destroy stops in case this is a gradient object
		if (wrapper.stops) {
			for (i = 0; i < wrapper.stops.length; i++) {
				wrapper.stops[i] = wrapper.stops[i].destroy();
			}
			wrapper.stops = null;
		}

		// remove element
		wrapper.safeRemoveChild(element);

		/*= if (build.classic) { =*/
		wrapper.destroyShadows();
		/*= } =*/

		// In case of useHTML, clean up empty containers emulating SVG groups (#1960, #2393, #2697).
		while (parentToClean && parentToClean.div && parentToClean.div.childNodes.length === 0) {
			grandParent = parentToClean.parentGroup;
			wrapper.safeRemoveChild(parentToClean.div);
			delete parentToClean.div;
			parentToClean = grandParent;
		}

		// remove from alignObjects
		if (wrapper.alignTo) {
			erase(wrapper.renderer.alignedObjects, wrapper);
		}

		for (var key in wrapper) {
        	if (wrapper.hasOwnProperty(key)) {
				delete wrapper[key];
			}
        }

		return null;
	};
}(Highcharts));

[TorsteinHonsi]

It should be released within two to three weeks. In the meantime, here's a drop-in fix that you can use for v5.0.10. View it live on jsFiddle.

// Drop-in fix for Highcharts issue #6550, requires Highcharts v5.0.10.
(function (H) {
	var each = H.each;
	/**
	 * Destroy the element and element wrapper and clear up the DOM and event
	 * hooks.
	 *
	 * @returns {void}
	 */
	H.SVGElement.prototype.destroy = function () {
		var wrapper = this,
			element = wrapper.element || {},
			parentToClean =
				wrapper.renderer.isSVG &&
				element.nodeName === 'SPAN' &&
				wrapper.parentGroup,
			grandParent,
			ownerSVGElement = element.ownerSVGElement,
			i;

		// remove events
		element.onclick = element.onmouseout = element.onmouseover =
			element.onmousemove = element.point = null;
		stop(wrapper); // stop running animations

		if (wrapper.clipPath && ownerSVGElement) {
			// Look for existing references to this clipPath and remove them
			// before destroying the element (#6196).
			each(
				ownerSVGElement.querySelectorAll('[clip-path]'),
				function (el) {
					// Include the closing paranthesis in the test to rule out
					// id's from 10 and above (#6550)
					if (el.getAttribute('clip-path')
							.indexOf(wrapper.clipPath.element.id + ')') > -1) {
						el.removeAttribute('clip-path');
					}
				}
			);
			wrapper.clipPath = wrapper.clipPath.destroy();
		}

		// Destroy stops in case this is a gradient object
		if (wrapper.stops) {
			for (i = 0; i < wrapper.stops.length; i++) {
				wrapper.stops[i] = wrapper.stops[i].destroy();
			}
			wrapper.stops = null;
		}

		// remove element
		wrapper.safeRemoveChild(element);

		/*= if (build.classic) { =*/
		wrapper.destroyShadows();
		/*= } =*/

		// In case of useHTML, clean up empty containers emulating SVG groups (#1960, #2393, #2697).
		while (parentToClean && parentToClean.div && parentToClean.div.childNodes.length === 0) {
			grandParent = parentToClean.parentGroup;
			wrapper.safeRemoveChild(parentToClean.div);
			delete parentToClean.div;
			parentToClean = grandParent;
		}

		// remove from alignObjects
		if (wrapper.alignTo) {
			erase(wrapper.renderer.alignedObjects, wrapper);
		}

		for (var key in wrapper) {
        	if (wrapper.hasOwnProperty(key)) {
				delete wrapper[key];
			}
        }

		return null;
	};
}(Highcharts));

[zainrafique]

@TorsteinHonsi thank you man

[zainrafique]

@TorsteinHonsi thank you man

[vesterij]

Hah, I have traced this bug past three days. I just found the reason but couldn't reproduce it in jsfiddle and then noticed that version was changed and it had been fixed literally yesterday. Thanks.

[vesterij]

Hah, I have traced this bug past three days. I just found the reason but couldn't reproduce it in jsfiddle and then noticed that version was changed and it had been fixed literally yesterday. Thanks.