Tool tips in visualforce chart

Question

I have a VF where I am plotting percentages in bar graphs, but in the tooltip, I want to show the revenue associated with the record. Please note that percentage and revenue are in the same wrapper class so mapping is not really an issue..

       <apex:chart height="220" width="600" data="{!revenue1}" background="#FFFFFF">
    <apex:legend position="top" font="10px Helvetica"/>
    <apex:axis type="Numeric" position="left" fields="Rev_Growth,Rev_Quota" title="Performance ( % )" />
    <apex:axis type="Category" position="bottom" fields="Series1">
        <apex:chartLabel rotate="0"/>
    </apex:axis>
    <apex:barSeries title="Growth,Quota" orientation="vertical" axis="left" xField="Series1" yField="Rev_Growth,Rev_Quota" Stacked="False" colorset="#5B9BD5,#92D050" Gutter="75" groupGutter="75">
        <apex:chartTips height="50" width="120" labelField="Series1" valueField="Revenue,Goal"/>
    </apex:barSeries>
   </apex:chart>

Answer 1

You can nest an apex:chartTips tag inside your data series tag. This lets you nominate different fields from your wrapper class as the source for the tooltip via its labelField and valueField attributes. So you can set the apex:chartTips valueField to reference your revenue while the series continues uses the percentage field.

Update

From the comment thread, it looks like where comma-separated field names are used, the basic form of apex:chartTips does not work: the valueField attribute only works with a single name. But it is possible to supply the name of a JavaScript function that renders the tooltip via the rendererFn attribute instead though documentation is hard to find. By adding such a function and inspecting its parameters in the browser's JavaScript debugger, I found that the below code code worked. (Note my test case is using different naming to your code.)

Test page and render function:

<apex:page controller="A">
<apex:chart height="300" width="300" data="{!revenue}">
    <apex:axis type="Numeric" position="left" fields="percentage1,percentage2"/>
    <apex:axis type="Category" position="bottom" fields="label"/>
    <apex:barSeries title="Growth,Quota" orientation="vertical" axis="left"
                xField="label" yField="percentage1,percentage2" Stacked="False"
                colorset="#5B9BD5,#92D050" Gutter="75" groupGutter="75">
        <apex:chartTips height="25" width="150" rendererFn="renderChartTip"/>
    </apex:barSeries>
</apex:chart>
<script>
function renderChartTip(klass, item) {
    var yField = item.yField;
    var amount = item.storeItem.get(yField === 'percentage1' ? 'amount1' : 'amount2');
    this.setTitle('Amount is ' + amount);
}
</script>
</apex:page>

Test controller:

public with sharing class A {
    public class Bean {
        public String label {get; set;}
        public Decimal percentage1 {get; set;}
        public Decimal amount1 {get; set;}
        public Decimal percentage2 {get; set;}
        public Decimal amount2 {get; set;}
        Bean(String label, Decimal percentage1, Decimal amount1,
                Decimal percentage2, Decimal amount2) {
            this.label = label;
            this.percentage1 = percentage1;
            this.amount1 = amount1;
            this.percentage2 = percentage2;
            this.amount2 = amount2;
        }
    }
    public Bean[] revenue {
        get {
            if (revenue == null) {
                revenue = new Bean[] {
                        new Bean('First', 50.00, 50000, 33.33, 33333.33),
                        new Bean('Second', 25.00, 25000, 22.22, 22222.22)
                        };
            }
            return revenue;
        }
        set;
    }
}

Sample output: