Styling of axis labels is only working for the first line

[eolsson]

Example http://jsfiddle.net/docsnyder/Ad33w/

In the example a label with several words are styled to red.

Result: When wordwrap kicks in, only the first line is red.
Expected: All lines to be red

Forum thread: http://highslide.com/forum/viewtopic.php?f=9&t=11972&start=0&st=0&sk=t&sd=a

[cailie]

Non-breaking spaces could be used as a workaround for this specific example, e.g.: http://jsfiddle.net/Ad33w/11/

[HoangNV]

@cailie: but non-breaking spaces will also break wordwrap

[cailie]

True, the workaround is to avoid the line break

[nsidawy]

Given how easy it is to fix this, can it be included in the next release? It is quite a restricting bug.

Illustrated below are updates to the buildText function in highcharts.src.js that fixed this bug for me.

//line ~3099
if (styleRegex.test(span)) {
    // storing the style in a variable before applying it to the span (note: spanStyle initialized as "")
    spanStyle = span.match(styleRegex)[1].replace(/(;| |^)color([ :])/, '$1fill$2');
    attr(tspan, 'style', spanStyle);
}
......
//line ~3175
if (words.length) {
    tspan = doc.createElementNS(SVG_NS, 'tspan');
    attr(tspan, {
        dy: textLineHeight || 16,
        x: parentX
    });
   //NEW LINE: applying the style of the span to the new line being created with the soft break
    attr(tspan, 'style', spanStyle); 
    textNode.appendChild(tspan);
    if (actualWidth > width) { // a single word is pressing it out
        width = actualWidth;
    }
}

And as always, thank you very much for this great tool.

[clayzermk1]

+1

This appears to still be in the 2.3.2 release.

@nsidawy Thank you for the patch, it got me going.

Here's how things are looking after the patch in v2.3.2:

//Line 3006
                    var attributes = {},
                        tspan = doc.createElementNS(SVG_NS, 'tspan'),
                        spanStyle = ''; // Work-around for #390.
                    if (styleRegex.test(span)) {
                      spanStyle = span.match(styleRegex)[1].replace(/(;| |^)color([ :])/, '$1fill$2'); // Work-around for #390.
                        attr(
                            tspan,
                            'style',
                            spanStyle // Work-around for #390.
                        );
                    }

//Line ~3090
                                if (words.length) {
                                    tspan = doc.createElementNS(SVG_NS, 'tspan');
                                    attr(tspan, {
                                        dy: textLineHeight || 16,
                                        x: parentX
                                    });
                                    attr(tspan, 'style', spanStyle); // Work-around for #390.
                                    textNode.appendChild(tspan);

                                    if (actualWidth > width) { // a single word is pressing it out
                                        width = actualWidth;
                                    }
                                }

Thank you for such a great tool!

[TorsteinHonsi]

Here's a more systematic test: http://jsfiddle.net/highcharts/sq5my/

[clayzermk1]

@highslide-software Awesome! Thank you for the patch!