New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling of axis labels is only working for the first line #390

Closed
eolsson opened this Issue Aug 26, 2011 · 7 comments

Comments

Projects
None yet
6 participants
@eolsson
Contributor

eolsson commented Aug 26, 2011

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

This comment has been minimized.

cailie commented Sep 18, 2011

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

@HoangNV

This comment has been minimized.

HoangNV commented Feb 24, 2012

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

@cailie

This comment has been minimized.

cailie commented Feb 24, 2012

True, the workaround is to avoid the line break

@nsidawy

This comment has been minimized.

nsidawy commented May 20, 2012

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

This comment has been minimized.

clayzermk1 commented Sep 6, 2012

+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

This comment has been minimized.

Collaborator

TorsteinHonsi commented Sep 7, 2012

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

@clayzermk1

This comment has been minimized.

clayzermk1 commented Sep 7, 2012

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment