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
Eran VizelEran Vizel 

Visualforce bar chart getting "cut" near the axis edge

Hi,

I try to embbed a pretty simple bars chart on Visualforce, with 2 grouped bars per each X axis point (dates).

Problem: the last column set on the X axis is always being "cut" and displays only one of the bars. However, if I expand the X axis dates range, and make it wider, it will show fine.
See attached image and code.

What coould be the cause?

Many thanks,
Eran

User-added image


<apex:page controller="VF_OpenVsClosedCasesChartController" docType="html-5.0">
<apex:form >
<br/>
    <apex:pageBlock rendered="{!showSelection}">
    <apex:pageblockButtons >
    <apex:commandButton value="Submit" action="{!submit}"/>
    </apex:pageblockButtons>
   
    <apex:outputtext value="Enter Start Date: " style="font-weight: bold;"/> &nbsp;&nbsp;&nbsp;&nbsp;
    <apex:input type="date" value="{!beginDate}"/>
    <br/><br/>
    <apex:outputtext value="Enter End Date: " style="font-weight: bold;"/> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
    <apex:input type="date" value="{!endDate}"/>
    <br/><br/><br/>
    <apex:pageMessages />
    
    
    </apex:pageBlock>

  <apex:chart height="400" width="1500" data="{!allData}" legend="true" background="#F8F8F8" rendered="{!showChart}">
  <apex:legend position="right"/>
          <apex:axis type="Numeric" position="left" fields="openAmount,closeAmount" 
            title="Cases Opened / Closed" grid="true"/>
          <apex:axis type="Category" position="bottom" fields="dateLabel" 
            title="Date" gridFill="true">
        </apex:axis>
        <apex:BarSeries axis="left" orientation="vertical" xField="dateLabel" yField="openAmount,closeAmount" title="Cases Opened,Cases Closed"/>
   </apex:chart>
   </apex:form>
</apex:page>