Skip to content
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
Closed

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

eolsson opened this issue Aug 26, 2011 · 7 comments

Comments

@eolsson
Copy link
Contributor

@eolsson 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
Copy link

@cailie 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
Copy link

@HoangNV HoangNV commented Feb 24, 2012

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

@cailie
Copy link

@cailie cailie commented Feb 24, 2012

True, the workaround is to avoid the line break

@nsidawy
Copy link

@nsidawy 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
Copy link

@clayzermk1 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
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Sep 7, 2012

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

@clayzermk1
Copy link

@clayzermk1 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants