Visualforce ChartTip

Hello Nitish,

Here is the documentation available for rendererFn in VF ChartTip:- https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_chartTips.htm

I have create a sample of code to implement rendererFn in visualforce page using ChartTip

Visualforce page:-

<apex:page controller=”NewChartVfController”>
<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>

Controller:-

public with sharing class NewChartVfController
{
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;
}
}

This example may be solve your query..