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?

  • 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 Apr 14 '13 at 17:17
  • Tried this using chrome.. And I guess this will be the browser we are going to use – Avidev9 Apr 14 '13 at 20:19
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
    Why whole function if height and width attributes might be just enough? – eyescream Jun 4 '13 at 20:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.