function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Satish PrajapatSatish Prajapat 

How chart tip rendererFn work in visualforce page?

How chart tip rendererFn function works:
This is the post for every one who want to work with charttip.
Here is the simple code which give Idea:
function renderChartTip(klass, item) { 
        
        
        var m = item.storeItem;
        console.log('m.data' + JSON.stringify(m.data));
        var lyd = JSON.stringify(m.data);
        
        //$j.each(m.data, function(key, value) {
            //console.log(key+"  "+value);
        // });
        
        var xAxisName = item.storeItem.get('xAxisName');
        var yAxisName = item.storeItem.get('yAxisName');
        var xAxisValue = m.get('name');
        
        var Total = item.storeItem.get('twoYearsPriorInvoiced') + item.storeItem.get('lastYearInvoiced') + item.storeItem.get('thisYearInvoiced');
        var percentageValue = m.get(item.yField);
        var colorCode,yearName;
        if(item.yField == 'twoYearsPriorInvoiced'){
            colorCode = '#349DE2';
            yearName = 'Two Year Prior Invoiced';
        }else if(item.yField == 'lastYearInvoiced'){
        	colorCode = '#1B2F5D';
            yearName = 'Last Year Invoiced';
        }else if(item.yField == 'thisYearInvoiced'){
        	colorCode ='#82DFD9';
            yearName = 'This Year Invoiced';
        }
		percentageValue = percentageValue/Total;
        percentageValue = (percentageValue *100).toFixed(2);
        Total = Total *1000;
        //this.setTitle(m.get('name'));
        this.setTitle(xAxisName);
        this.update(''
          + '<table>'
          + '<tr><td><b></b>&nbsp;</td><td>' + xAxisValue + '</td></tr>'
          + '</table>'
          + '<table>'
                    + '<tr>&nbsp;<div style="border-left:5px solid '+colorCode+';height:28px;margin-left:4px"><b>&nbsp;&nbsp;'+yearName+'</b></div></tr>'
                    //+ '<tr class = \'sumOfSTAR_Text\'><td><b></b>&nbsp;</td><td>' + item.yField +'&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>'        
          + '<hr>'
          + '<tr class = \'sumOfSTAR_Text\'><td><b></b>&nbsp;</td><td>' + yAxisName +'&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>'
          + '<tr><td><b></b>&nbsp;</td><td>( ' + percentageValue + '% of '+ Total +' for '+ xAxisValue +' )</td></tr>'
          + '</table>'
        );
      }
Visualforce page :
<apex:chart data="{!data}" height="400" width="745" resizable="true" id="Myid">
        <apex:legend position="bottom" font="14px Helvetica"/>
        <apex:axis id="YaxisId" type="Numeric" position="left" grid="true" fields="twoYearsPriorInvoiced,lastYearInvoiced,thisYearInvoiced" title="Sum of STAR Total Invoiced" steps="4" minimum="0" dashSize="3" >     
            <!--<apex:chartLabel />-->
        </apex:axis>
        <apex:axis type="Category" position="bottom" fields="name" title="STAR Job Date" dashSize="0"/>
        <apex:barSeries orientation="vertical" axis="left" stacked="true" showInLegend="true" groupGutter="10" highlight="false"
            xField="name" yField="twoYearsPriorInvoiced,lastYearInvoiced,thisYearInvoiced" xPadding="{!xPadding}" title="TwoYearPriorInvoiced,LastYearInvoiced,ThisYearInvoiced" colorSet="#349DE2,#1B2F5D,#82DFD9">
            <apex:chartTips height="160" width="415" id="tip"  rendererFn="renderChartTip" trackMouse="true"  />
        </apex:barSeries>
    </apex:chart>