[CLOSED] In Internet explorer 8.0 chart X & Y-axis label font not displaying readable format.

**PriceRightHTML5team** · Apr 09, 2014, 6:19 AM

Originally Posted by Daniil

The styles for an axis's labels are predefined in a Chart's themes. There is the Base theme by default.
http://docs.sencha.com/extjs/4.2.1/s...art-theme-Base

There is the following "font" rule defined in the Base theme for an axis's labels.

font: '12px Arial, Helvetica, sans-serif'

Could you, please, run the following page on your requirement and post a screenshot?

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <div style="font: 12px Arial, Helvetica, sans-serif;">Some text to test the font rule!</div>
</body>
</html>

Thanks Daniil for detailed reply.

Daniil,this issue is coming only on chart label or text not with other controls and only reproduce in full version of IE 8.0 not in any other browser Chrome,Mozilla which i already mention in my previous post. the example which you have given in last post some text in a div with font i tested it and its working fine because this font issue is not with other controls except text on chart with this post i attached other chart example screenshot from ext.net samples with its render code in IE 8.0 i hope that can help us to find solution.

**Daniil** · Apr 09, 2014, 6:04 PM

Thank you.

It looks people have similar problems with fonts in IE8.
http://answers.microsoft.com/en-us/i...7-00c81c00e539
http://answers.microsoft.com/en-us/i...b-20752155d281

Now I am pretty sure something is wrong with fonts in your Windows/IE8 setup.

**PriceRightHTML5team** · Apr 10, 2014, 8:56 AM

Originally Posted by Daniil

Thank you.

It looks people have similar problems with fonts in IE8.
http://answers.microsoft.com/en-us/i...7-00c81c00e539
http://answers.microsoft.com/en-us/i...b-20752155d281

Now I am pretty sure something is wrong with fonts in your Windows/IE8 setup.

Daniil,i went through both Microsoft answer link provided by you and tried following solution one by one which is mention in microsoft answer link

tried Solution 1 : i copied Arial font from another system where it working fine and installed in my system and without restarting system tested same chart with IE 8.0 by clearing its history but facing same issue.

tried Solution 2 : i copied Arial font from another system where it working fine and installed in my system and now restart the system tested same chart with IE 8.0 by clearing its history but getting same issue

tried Solution 3 : by Restore default font settings option from Control Panel > All Control Panel Items > Fonts >Font settings and tested same chart with IE 8.0 by clearing its history but still getting same issue

tried Solution 4 : tried with by uncheck "Ignore font styles specified on web page" option from Tools>Internet Options >General tab > Accessibility and tested same chart with IE 8.0 by clearing its history but no any luck same issue

while reading both the answer links i come to conclusion that the font issue which they people getting its not any specific control like answer link 1
http://answers.microsoft.com/en-us/i...7-00c81c00e539 in question they mention that facing issue in HTML text in Internet Explorer 8 displaying Italic font but in our case we are facing issue only with the text which we have on chart not any other HTML text or any other control and answer link 2 they mentioned facing issue in all browser in our case we are facing in only IE 8.0 but any way we tried all the solution mentioned in both Microsoft answer links.

one thing i want to mention here while searching about this issue on google i come to know that same chart font issue with sencha also please refer following link for more details http://www.sencha.com/forum/showthre...y-Italic-fonts

one more thing i observe that if we export same chart to image on exported image we are not getting that font issue.

**geoffrey.mcgill** · Apr 10, 2014, 11:32 AM

Yes, this is likely an issue with Chart JavaScript (Rapha?lJS or varient of Rapha?l) and VML support within IE8.

That is likely the cause, but finding a fix may not be possible and will be considered a Defect of Ext JS.

We will do some research to try and find a fix (or work-around). Not being able to reproduce the issue on our side is going to make testing difficult, so if we do come up with a possible solution, we may ask for some testing assistance from you.

**PriceRightHTML5team** · Apr 10, 2014, 12:16 PM

Geoffrey,We are ready provide testing assistance you and your team, you can ask us when you required but the only concern is that within a week our client going start using this application and most of our clients using IE 8.0 if that font issue reproduce on client machine that could be a major disappointment for us..!

**Daniil** · Apr 10, 2014, 3:39 PM

Please try this override.

Ext.draw.engine.Vml.override({
    setTextAttributes: function (sprite, params) {        
        var me = this,
            vml = sprite.vml,
            textStyle = vml.textpath.style,
            spanCacheStyle = me.span.style,
            zoom = me.zoom,
            round = Math.round,
            fontObj = {
                fontSize: "font-size",
                fontWeight: "font-weight",
                fontStyle: "font-style"
            },
            fontProp,
            paramProp;

        if (sprite.dirtyFont) {
            if (params.font) {
                textStyle.font = spanCacheStyle.font = params.font;
            }

            if (params["font-family"]) {
                //textStyle.fontFamily = '"' + params["font-family"].split(",")[0].replace(me.fontFamilyRe, "") + '"';
                //spanCacheStyle.fontFamily = params["font-family"];

                textStyle.fontFamily = '"sans-serif"';
                spanCacheStyle.fontFamily = '"sans-serif"';
            }

            for (fontProp in fontObj) {
                paramProp = params[fontObj[fontProp]];
                if (paramProp) {
                    textStyle[fontProp] = spanCacheStyle[fontProp] = paramProp;
                }
            }

            me.setText(sprite, params.text);

            if (vml.textpath.string) {
                me.span.innerHTML = String(vml.textpath.string).replace(/</g, "<").replace(/&/g, "&").replace(/\n/g, "<br/>");
            }

            vml.W = me.span.offsetWidth;
            vml.H = me.span.offsetHeight + 2; // TODO handle baseline differences and offset in VML Textpath

            // text-anchor emulation
            if (params["text-anchor"] == "middle") {
                textStyle["v-text-align"] = "center";
            }
            else if (params["text-anchor"] == "end") {
                textStyle["v-text-align"] = "right";
                vml.bbx = -Math.round(vml.W / 2);
            }
            else {
                textStyle["v-text-align"] = "left";
                vml.bbx = Math.round(vml.W / 2);
            }
        }
        vml.X = params.x;
        vml.Y = params.y;
        vml.path.v = Ext.String.format("m{0},{1}l{2},{1}", Math.round(vml.X * zoom), Math.round(vml.Y * zoom), Math.round(vml.X * zoom) + 1);
        // Clear bbox cache
        sprite.bbox.plain = null;
        sprite.bbox.transform = null;
        sprite.dirtyFont = false;
    }
});

It should change the default "Arial" font to "sans-serif" here:

textStyle.fontFamily = '"sans-serif"';
spanCacheStyle.fontFamily = '"sans-serif"';

If it doesn't help, please try another fonts like "Tahoma", etc. Please ensure the font is being applied to the elements by inspecting it.

If it is not applied, please ensure the overridden setTextAttributes method is executed. You can put this inside the method:

alert("I am here");

**PriceRightHTML5team** · Apr 11, 2014, 1:16 PM

Daniil, i tried solution given by you but still no any luck. as you said i tested it by different fonts like "sans-serif" ,Tahoma,Calibri but same issue and if we check it by inspect element there it showing font Arial only then to confirm our setTextAttributes method is executing or not i have putted alert message inside the method and run application again by clearing IE 8.0 history then it prompting alert message properly but no change in font issue.
Please find attached screenshot.

One thing i want to mention here is we have created complete chart from code behind.

**Daniil** · Apr 11, 2014, 3:34 PM

It is better to test with the same example. I'll post below.

I guess why the font-family is not applied on your side. There is a bit different override in the example below. Please try the example. What do you see inspecting the label elements now?

Example

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store s = this.Chart1.GetStore();
            s.DataSource = new object[]
            {
                new 
                {
                    month = "January",
                    y = 25 
                },
                new 
                {
                    month = "February",
                    y = 50  
                },
                new 
                {
                    month = "March",
                    y = 100   
                }
            };
        }
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        Ext.draw.engine.Vml.override({
            setTextAttributes: function (sprite, params) {    
                var me = this,
                    vml = sprite.vml,
                    textStyle = vml.textpath.style,
                    spanCacheStyle = me.span.style,
                    zoom = me.zoom,
                    round = Math.round,
                    fontObj = {
                        fontSize: "font-size",
                        fontWeight: "font-weight",
                        fontStyle: "font-style"
                    },
                    fontProp,
                    paramProp;
 
                if (sprite.dirtyFont) {
                    if (params.font) {
                        textStyle.font = spanCacheStyle.font = params.font;
                    }

                    textStyle.fontFamily = '"sans-serif"';  // added
                    spanCacheStyle.fontFamily = '"sans-serif"';   // added
 
                    if (params["font-family"]) {
                        //textStyle.fontFamily = '"' + params["font-family"].split(",")[0].replace(me.fontFamilyRe, "") + '"';
                        //spanCacheStyle.fontFamily = params["font-family"];                        
                        
                        textStyle.fontFamily = '"sans-serif"';
                        spanCacheStyle.fontFamily = '"sans-serif"';
                    }
 
                    for (fontProp in fontObj) {
                        paramProp = params[fontObj[fontProp]];
                        if (paramProp) {
                            textStyle[fontProp] = spanCacheStyle[fontProp] = paramProp;
                        }
                    }
 
                    me.setText(sprite, params.text);
 
                    if (vml.textpath.string) {
                        me.span.innerHTML = String(vml.textpath.string).replace(/</g, "<").replace(/&/g, "&").replace(/\n/g, "<br/>");
                    }
 
                    vml.W = me.span.offsetWidth;
                    vml.H = me.span.offsetHeight + 2; // TODO handle baseline differences and offset in VML Textpath
 
                    // text-anchor emulation
                    if (params["text-anchor"] == "middle") {
                        textStyle["v-text-align"] = "center";
                    }
                    else if (params["text-anchor"] == "end") {
                        textStyle["v-text-align"] = "right";
                        vml.bbx = -Math.round(vml.W / 2);
                    }
                    else {
                        textStyle["v-text-align"] = "left";
                        vml.bbx = Math.round(vml.W / 2);
                    }
                }
                vml.X = params.x;
                vml.Y = params.y;
                vml.path.v = Ext.String.format("m{0},{1}l{2},{1}", Math.round(vml.X * zoom), Math.round(vml.Y * zoom), Math.round(vml.X * zoom) + 1);
                // Clear bbox cache
                sprite.bbox.plain = null;
                sprite.bbox.transform = null;
                sprite.dirtyFont = false;
            }
        });
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Chart 
            ID="Chart1" 
            runat="server" 
            Width="400" 
            Height="400">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="month" />
                                <ext:ModelField Name="y" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Axes>
                <ext:CategoryAxis Title="CategoryAxis" Fields="month" Position="Left" />
                <ext:NumericAxis Title="NumericAxis" Fields="y" Position="Bottom" />
            </Axes>
            <Series>
                <ext:BarSeries Titles="Chart" XField="month" YField="y" />
            </Series>
        </ext:Chart>
    </form>
</body>
</html>

**PriceRightHTML5team** · Apr 14, 2014, 10:44 AM

Danill, i copied updated sample code run that sample code in IE 8.0 but still i m getting same issue then i tried by changing font in setTextAttributes method from sans-serif to some other font like Calibri and Arial one by one and run sample again and observe that it working fine for Calibri and Arial fonts please look attached file.

As it working fine sample code then i copied your updated setTextAttributes method with Arial font in my code and ran my application there also its working and tested it two three times by clearing history of IE 8.0 but not able to replicate our cursive writing font issue

So, finally we can say we have fixed our problem.

Thank you very much Daniil for your support and taking it on priority.

**Daniil** · Apr 14, 2014, 5:15 PM

It is very weird that it helped with "Arial", because it appears to be applied by default. Very strange issue.

We are glad to help you and thank you for providing us with all the requested information.

Thread: [CLOSED] In Internet explorer 8.0 chart X & Y-axis label font not displaying readable format.

Thread Tools

Search Thread

Display

Similar Threads

[CLOSED] Chart - Change axis label dynamically

[CLOSED] How to set font of X & Y axis in Line Chart

Chart column series labels not showing up in Internet Explorer

Issue in Internet Explorer displaying a window on top of a pdf that is loaded into a panel

[CLOSED] Changing the font size of the column chart x and y axis title.

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources