Sign in to follow this  
mexicocitibluez

Tooltext overflowing container in Internet Explorer 9

Recommended Posts

I'm have an issue where a the tooltip's of a chart are overflowing the parent container in Internet Explorer 9 and I'm assuming all versions lower. I have the newest version of Fusion Charts so I don't believe that to be the problem. Here is my JSON though I'm pretty sure it isn't the cause of the problem and attached is a picture of what I mean. You can clearly see the tooltext overlapping the chart next to it even though they are seperate containers:

 

{
    "chart" : {
        "numberPrefix" : "",
        "numberSuffix" : "",
        "bgcolor" : "#ffffff",
        "bgalpha" : "0",
        "showAlternateHGridColor" : "1",
        "plotBorderColor" : "e51937",
        "plotBorderThickness" : "2",
        "showValues" : "0",
        "divLineColor" : "CCCCCC",
        "showCanvasBorder" : "1",
        "numDivLines" : "2",
        "yAxisValuesPadding" : "8",
        "anchorBgColor" : "e51937",
        "anchorBorderThickness" : "0",
        "showShadow" : "1",
        "anchorRadius" : "5",
        "showBorder" : "0",
        "canvasBorderAlpha" : "0",
        "baseFontSize" : "8",
        "chartTopMargin" : "5",
        "chartLeftMargin" : "5",
        "chartRightMargin" : "10",
        "chartBottomMargin" : "5",
        "labelPadding" : "5",
        "clickURL" : "j-updateSelectedChart-1",
        "labelDisplay" : "rotate",
        "slantLabels" : "1",
        "setAdaptiveYMin" : "1"
    },
    "styles" : {
        "definition" : [{
                "name" : "toolTipStyle",
                "type" : "font",
                "font" : "Arial",
                "size" : "14",
                "color" : "",
                "bold" : "",
                "bgcolor" : "",
                "param" : "",
                "start" : "",
                "duration" : ""
            }
        ],
        "application" : [{
                "toobject" : "TOOLTIP",
                "styles" : "toolTipStyle"
            }, {
                "toobject" : "DATATOOLTIP",
                "styles" : "toolTipStyle"
            }
        ]
    },
    "data" : [{
            "label" : "2011",
            "value" : "319240.05000",
            "color" : "e51937",
            "toolText" : "319,240.1"
        }, {
            "label" : "2012",
            "value" : "308649.97000",
            "color" : "e51937",
            "toolText" : "308,650.0"
        }, {
            "label" : "2013",
            "value" : "295170.80000",
            "color" : "e51937",
            "toolText" : "295,170.8"
        }, {
            "label" : "2014",
            "value" : "281327.70000",
            "color" : "e51937",
            "toolText" : "281,327.7"
        }
    ]
}
}, {
    "Code" : "NB",
    "Position" : "1-2",
    "Chart" : {
        "chart" : {
            "numberPrefix" : "",
            "numberSuffix" : "",
            "bgcolor" : "#ffffff",
            "bgalpha" : "0",
            "showAlternateHGridColor" : "1",
            "plotBorderColor" : "e51937",
            "plotBorderThickness" : "2",
            "showValues" : "0",
            "divLineColor" : "CCCCCC",
            "showCanvasBorder" : "1",
            "numDivLines" : "2",
            "yAxisValuesPadding" : "8",
            "anchorBgColor" : "e51937",
            "anchorBorderThickness" : "0",
            "showShadow" : "1",
            "anchorRadius" : "5",
            "showBorder" : "0",
            "canvasBorderAlpha" : "0",
            "baseFontSize" : "8",
            "chartTopMargin" : "5",
            "chartLeftMargin" : "5",
            "chartRightMargin" : "10",
            "chartBottomMargin" : "5",
            "labelPadding" : "5",
            "clickURL" : "j-updateSelectedChart-1",
            "labelDisplay" : "rotate",
            "slantLabels" : "1",
            "setAdaptiveYMin" : "1"
        },
        "styles" : {
            "definition" : [{
                    "name" : "toolTipStyle",
                    "type" : "font",
                    "font" : "Arial",
                    "size" : "14",
                    "color" : "",
                    "bold" : "",
                    "bgcolor" : "",
                    "param" : "",
                    "start" : "",
                    "duration" : ""
                }
            ],
            "application" : [{
                    "toobject" : "TOOLTIP",
                    "styles" : "toolTipStyle"
                }, {
                    "toobject" : "DATATOOLTIP",
                    "styles" : "toolTipStyle"
                }
            ]
        },
        "data" : [{
                "label" : "2011",
                "value" : "61719.90000",
                "color" : "e51937",
                "toolText" : "61,720"
            }, {
                "label" : "2012",
                "value" : "70275.30000",
                "color" : "e51937",
                "toolText" : "70,275"
            }, {
                "label" : "2013",
                "value" : "79353.00000",
                "color" : "e51937",
                "toolText" : "79,353"
            }, {
                "label" : "2014",
                "value" : "72719.80000",
                "color" : "e51937",
                "toolText" : "72,720"
            }
        ]
    }
 

Thank you.

post-28509-0-53773000-1412268883_thumb.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this