1

Hi today while working found that visualforce charts were acting weird when there is a big text included in the display/hover field. The hover text was not properly displaying the value and the content.

Here is the code to replicate the same.

<apex:page >
    <script>
        // Build the chart data array in JavaScript
        var dataArray = new Array();
        dataArray.push({'name':'Category 1','Amount':66});
        dataArray.push({'name':' Big Category','Amount':100});
        console.log(dataArray);

    </script>
    <apex:pageBlock >
        <apex:chart width="450" height="400" data="dataArray">
            <apex:axis type="Category" position="bottom" fields="name" title="Category"/>
            <apex:axis type="Numeric" position="left" fields="Amount" title="Amount"/>
            <apex:barSeries orientation="vertical" axis="bottom" 
                xField="name" yField="Amount"/>
        </apex:chart>
    </apex:pageBlock>
</apex:page>

And the screenshot of the issue : Visualforce Charting Hover Bug

Any Idea how to fix this one?

Improve this question
2
  • Have you tried this in different browsers AND do the browsers have different default font size settings?? The latter could potentially affect this problem. E.G. Large Fonts could cause overflow or wrapping. Depending on the browser, the box may or may not expand to accommodate.
    – crmprogdev
    Commented Apr 14, 2013 at 17:17
  • Tried this using chrome.. And I guess this will be the browser we are going to use
    – Avidev9
    Commented Apr 14, 2013 at 20:19

2 Answers 2

Reset to default
3

Try chartTips width

<apex:chartTips height="20" width="120"/>

enter image description here

In your sample:

<apex:page >
    <script>
        // Build the chart data array in JavaScript
        var dataArray = new Array();
        dataArray.push({'name':'Category 1','Amount':66});
        dataArray.push({'name':' Big Category','Amount':100});
        console.log(dataArray);

    </script>
    <apex:pageBlock >
        <apex:chart width="450px" height="400" data="dataArray">
            <apex:axis type="Category" position="bottom" fields="name" title="Category"/>
            <apex:axis type="Numeric" position="left" fields="Amount" title="Amount" />

            <apex:barSeries orientation="vertical" axis="bottom" 
                xField="name" yField="Amount" >
                <apex:chartTips height="20" width="120"/>
            </apex:barSeries>
        </apex:chart>
    </apex:pageBlock>
</apex:page>
Improve this answer
0

You can resize the tooltip box via implementing apex:chartTips.renderFn Javascript method.

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_chartTips.htm#kanchor1120

Improve this answer
1
  • 1
    Why whole function if height and width attributes might be just enough?
    – eyescream
    Commented Jun 4, 2013 at 20:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .