Title not consistent when xAxis label shortened

[zbycz]

Expected behaviour

Shortened xAxis label displays the same text in label and its title including html entities.

Actual behaviour

Html entities for title are not processed.

Note, they are processed for the label by this method:

highcharts/js/parts/SvgRenderer.js

Lines 2357 to 2358 in 1ecd7de

	unescapeEntities = function (inputStr) {
	objectEach(renderer.escapes, function (value, key) {

You should probably extend this section of titleSetter() method:

highcharts/js/parts/SvgRenderer.js

Lines 1768 to 1769 in 1ecd7de

	// #3276, #3895
	(String(pick(value), '')).replace(/<[^>]*>/g, '')

Live demo with steps to reproduce

Hover over the first label on xAxis
http://jsfiddle.net/nhgh1Lz9/

Affected browser(s)

Chrome 61 on macos

Related issue

#3276

[sebastianbochan]

Hi @zbycz
Thank you for the reporting.

Workaround

Demo:

• http://jsfiddle.net/BlackLabel/0enx9rc1/

Based on solution from buildText method:

unescapeAngleBrackets = function(inputStr) {
     return inputStr.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
};

[pawelfus]

Hi @zbycz

You are right, it should be consistent.

Workaround:
Unescape entities:

(function(H) {
  H.wrap(H.SVGElement.prototype, 'titleSetter', function(p, value) {
    var renderer = this.renderer;

    unescapeEntities = function(inputStr) {
      H.objectEach({
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        "'": '&#39;',
        '"': '&quot'
      }, function(value, key) {
        inputStr = inputStr.replace(
          new RegExp(value, 'g'),
          key
        );
      });
      return inputStr;
    };

    return p.call(this, unescapeEntities(value));
  });
})(Highcharts)

Demo: http://jsfiddle.net/BlackLabel/nhgh1Lz9/2/

[zbycz]

Thanks for the help.

[TorsteinHonsi]

Demo with the fix applied: http://jsfiddle.net/highcharts/nhgh1Lz9/3/