+ Start a Discussion
RIyas BasheerRIyas Basheer 

Apex Guage chart not rendering properly inside the apex repeater


I have to show 5 Guge charts inside a list based on a list value. I have included a apex:chart inside a apex:repeat. But the all the Guage charts are grouped together & displayed in the position of 1st chart as the screen shot below:

User-added image

My VF page:
<apex:page controller="guageDatas">
<h1>The Guages</h1>
  <apex:repeat value="{!GuageList}" var="gua" >
  <apex:outputPanel layout="block" style="border:1px solid blue; margin:20px; width:50%">
        <apex:outputText value="{!gua}"></apex:outputText>
        <apex:chart id="guageChart" height="100" width="250" animate="true" data="{!GuageData}">
           <apex:axis type="Gauge" position="gauge" title="Closed Won Opportunities"  minimum="0" maximum="100" steps="10"/>
           <apex:gaugeSeries dataField="value" donut="50" colorSet="#78c953,#ddd" needle="{!OR(gua == 'Guage2', gua == 'Guage4')}"/>

And the controller:
public with sharing class guageDatas {
    public List<string> getGuageList(){
      return new List<string>{'Guage1', 'Guage2', 'Guage3', 'Guage4', 'Guage5'};
    public List<guageValue> getGuageData(){
      List<guageValue> chartData = new List<guageValue>();
      chartData.add(new guageValue());
      return chartData;
   public Class guageValue  {
        public String name {get;set;}
        public Double value {get;set;}
        public guageValue(){
            this.value = Math.random()*100;            
            this.name = 'Guage'+this.value;


How can I display the Guage charts in repective columns. In my orginal page I can't avoid the apex:repeater
ShashankShashank (Salesforce Developers) 
It could be related to this: https://success.salesforce.com/issues_view?id=a1p30000000T4hpAAC