+ Start a Discussion
krishna 2619krishna 2619 

Visualforce page chart not displaying colors correctly on Legend and showing 0 on top of the bar

Hi all I have created a Visualforce page chart but in this, i have 2 issues 

1) On top of the first bar its showing "0"
2) colors are not displayed in Leged properly 

Code : 
 <apex:chart data="{!data1}" height="400" width="500">
    <apex:legend position="left" />
    <apex:axis type="Numeric" position="left" title="Forecast" grid="true" fields="data1,data2,data3"  dashSize="2" minimum="0" maximum="200">
        <apex:chartLabel display="none" />
    </apex:axis>
    <apex:axis type="Category" position="bottom" fields="name" title="Q2" minimum="0" maximum="200">
        <apex:chartLabel display="none" rotate="315"/>
    </apex:axis>
    <apex:barSeries orientation="vertical" axis="left" stacked="true" xField="name" yField="Actual,Forcast,Planned" colorsProgressWithinSeries="True" colorSet="blue,Magenta,Yellow,LightSeaGreen" >
                <apex:chartLabel />

</apex:barSeries>
</apex:chart>  ​

User-added image

Alain CabonAlain Cabon
Hi,

The number of yField is not the same as the number of color.

  <apex:barSeries orientation="vertical" axis="left" stacked="true" xField="name" yField="Actual,Forcast,Planned" colorsProgressWithinSeries="True" colorSet="blue,Magenta,Yellow,LightSeaGreen" >
 <apex:chartLabel />
 
<apex:page  controller="ChartController" title="TEST REPORT">
    <H1>
        TEST REPORT
    </H1>
    <apex:chart data="{!data}" height="400" width="500">
        <apex:legend position="left" />
        <apex:axis type="Numeric" position="left" title="Forecast" grid="true" fields="Actual,Forecast,Planned"  dashSize="2" minimum="0" maximum="200">
            <apex:chartLabel display="none" />
        </apex:axis>
        <apex:axis type="Category" position="bottom" fields="name" title="Q2" minimum="0" maximum="200">
            <apex:chartLabel display="none" rotate="315"/>
        </apex:axis>
        <apex:barSeries orientation="vertical" axis="left" stacked="true" xField="name" yField="Actual,Forecast,Planned" colorsProgressWithinSeries="True" colorSet="blue,Magenta,Yellow" >
            <apex:chartLabel />
        </apex:barSeries>
    </apex:chart> 
</apex:page>
 
public class ChartController {
    // Return a list of data points for a chart
    public List<Data> getData() {
        List<Data> data = new List<Data>();
        data.add(new Data('Quota', 30, 90, 55));
        data.add(new Data('Forecast', 44, 15, 65));
        return data;
    }

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


User-added image

Regards

Alain
 
krishna 2619krishna 2619
Hi Alain,

We have used the like this
  data.add(new Data('Quota', 30, 0, 0));
data.add(new Data('Forecast', 44, 15, 65));

here in quota, we are using only 1 value and in the forecast, we are using 3 different parameters.

So if you see my post we are getting 0 on top of the first bar I want to remove that and I want 4 different colors on the first bar there should be one color (Quota) and for the forecast, we need 3 different colors.

Thanks,
Krishna