VF Radar Chart labels clipped

Question

i am trying to create a radar chart.my apex class is

public class Sample {
    List<String> xx = new List<String> {'Value Proposition','Business Understanding','Responsiveness','Terms & Conditions','Quality','Customer Care','Strategy Alignment','Relationship'};
    public List<RadarWedgeData> getData(){
          List<RadarWedgeData> pie = new List<RadarWedgeData>();
           for(Integer i=0;i<xx.size(); i++)
             pie.add(new RadarWedgeData(xx.get(i),1,2,3));              
       return pie;
    }

// Wrapper class
public class RadarWedgeData {
public String name { get; set; }
public Integer data1 { get; set; }
public Integer data2 { get; set; }
public Integer data3 { get; set; }
public RadarWedgeData(String name, Integer data1 , Integer data2,Integer data3) {
this.name = name;
this.data1 = data1;
this.data2 = data2;
this.data3 = data3;
}
}
}

and my visualforce page source code is

<apex:page controller="Sample">
<apex:chart height="600" width="700" legend="true" data="{!data}" >
<apex:axis type="Radial" position="radial" fields="data1">
<apex:chartLabel ></apex:chartLabel>
</apex:axis>

 <apex:radarSeries xField="name" yField="data1" tips="true" opacity="0.4"/>

  <apex:radarSeries xField="name" yField="data2" tips="true" opacity="0.4"/>
<apex:radarSeries xField="name" yField="data3" tips="true"
markerType="cross" strokeWidth="2" strokeColor="#f33" opacity="0.4"/>
</apex:chart>
</apex:page>

but my chart is not rendering labels properly.its cutting Value Proposition label,Strategy ALignment as you can see in following link https://www.dropbox.com/s/95olcjztxgg7i2r/labels%20not%20rendering.png .please guideline how to render labels properly.Thanks

Answer 1

I can see no attributes settable in Visualforce that would fix this. Using "Inspect Element" in the page, the problem appears to be that the label at the top has a y position of 0 set with a text alignment of "middle".

A way to work around this is to add padding to the svg element that contains the chart data after the svg element has been inserted in the page. The code below does that so that the chart labels are no longer clipped.

<apex:page controller="Sample">
    <apex:chart height="600" width="700" legend="true" data="{!data}" >
        <apex:axis type="Radial" position="radial" fields="data1"/>
        <apex:radarSeries xField="name" yField="data1" tips="true" opacity="0.4"/>
        <apex:radarSeries xField="name" yField="data2" tips="true" opacity="0.4"/>
        <apex:radarSeries xField="name" yField="data3" tips="true" markerType="cross"
                strokeWidth="2" strokeColor="#f33" opacity="0.4"/>
    </apex:chart>

<apex:includeScript value="//code.jquery.com/jquery-1.11.0.min.js"/>
<script>
var j$ = jQuery.noConflict();
j$(document).ready(function() {
    var updateSvgCss = function() {
       var svg = j$('svg');
       if (svg.length > 0) {
           svg.css('padding', '20px');
           svg.css('height', '640px');
           svg.css('width', '740px');
       } else {
           // svg element appears to be dyamically inserted so poll for it
           setTimeout(updateSvgCss, 10);
       }
    };
    updateSvgCss();
});
</script>
</apex:page>