[flexcoders] Removing extreme ends of an Axis

[jamiebadman]

Hi,

Weird one this... if you run the attached code, you'll see that on the
horizontal axis, at each side of it, it extends fractionally past the
vertical axes... anyone know how to prevent this?

Thanks,

Jamie.

<?xml version="1.0"?>
<!-- charts/AddLabelsWithOffsetLines.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
        backgroundColor="0xFFFFFF" 
        backgroundGradientColors="[0xFFFFFF, 0xFFFFFF]" 
        >

  <mx:Script><![CDATA[
        import mx.containers.HBox;
        import mx.charts.LinearAxis;
        import mx.containers.Box;
    import mx.collections.ArrayCollection;
    import mx.charts.series.items.ColumnSeriesItem;
    import mx.charts.ChartItem;
    import mx.charts.chartClasses.CartesianCanvasValue;
    import mx.charts.chartClasses.CartesianTransform;
        import qs.charts.dataShapes.*;

     [Bindable]
     public var profits:ArrayCollection = new ArrayCollection([
        {Month:1, Profit:1300},
        {Month:2, Profit:750},
        {Month:3, Profit:1100},
        {Month:4, Profit:1000},
        {Month:5, Profit:980},
        {Month:6, Profit:1500},
        {Month:7, Profit:2060},
        {Month:8, Profit:1700},
        {Month:9, Profit:1690},
        {Month:10, Profit:2200},
        {Month:11, Profit:2550},
        {Month:12, Profit:3000}
     ]);
  ]]></mx:Script>

        <mx:Stroke id="yAxisStroke" color="#444444" alpha="1" weight="2"/>
        <mx:Stroke id="xAxisStroke" color="#444444" alpha="1" weight="2"/>
        
  <mx:Canvas id="mainCanvas" width="80%" height="80%" backgroundAlpha="0">
     <mx:LineChart id="myChart" width="100%" height="90%" 
        dataProvider="{profits}" 
        selectionMode="single">

                <mx:seriesFilters>
                        <mx:Array/>
                </mx:seriesFilters>
       
        <mx:backgroundElements>
            <mx:CartesianDataCanvas id="canvas" alpha="0"
includeInRanges="false" />
        </mx:backgroundElements>

        <mx:horizontalAxis>
           <mx:CategoryAxis  
                dataProvider="{profits}" 
                categoryField="Month" 
           />
        </mx:horizontalAxis>
        
        <mx:secondVerticalAxis>
            <mx:LinearAxis />
        </mx:secondVerticalAxis>

        <mx:horizontalAxisRenderer>
                        <mx:AxisRenderer showLabels="false" canStagger="false"
placement="top" tickLength="0" minorTickPlacement="outside"
tickPlacement="outside" minorTickLength="0" fontSize="11">
                                <mx:axisStroke>{xAxisStroke}</mx:axisStroke>
                                <mx:tickStroke>{xAxisStroke}</mx:tickStroke>
                                
<mx:minorTickStroke>{xAxisStroke}</mx:minorTickStroke>                          
                        </mx:AxisRenderer>
        </mx:horizontalAxisRenderer>

                <mx:verticalAxisRenderer>
                        <mx:AxisRenderer tickLength="0" 
minorTickPlacement="outside"
tickPlacement="outside" minorTickLength="0"  fontSize="11"
fontWeight="normal">
                        <mx:axisStroke>{yAxisStroke}</mx:axisStroke>
                        <mx:tickStroke>{yAxisStroke}</mx:tickStroke>
                        <mx:minorTickStroke>{yAxisStroke}</mx:minorTickStroke>
                        </mx:AxisRenderer>                              
                </mx:verticalAxisRenderer>

                <mx:secondVerticalAxisRenderer>
                        <mx:AxisRenderer tickLength="0" 
minorTickPlacement="outside"
tickPlacement="outside" minorTickLength="0"  fontSize="11"
fontWeight="normal">
                        <mx:axisStroke>{yAxisStroke}</mx:axisStroke>
                        <mx:tickStroke>{yAxisStroke}</mx:tickStroke>
                        <mx:minorTickStroke>{yAxisStroke}</mx:minorTickStroke>
                        </mx:AxisRenderer>                              
                </mx:secondVerticalAxisRenderer>
                                    
        <mx:series>
           <mx:LineSeries
                id="mainSeries"
                xField="Month" 
                yField="Profit" 
                displayName="Profit"
                selectable="true">
                
                                <mx:lineStroke>
                    <mx:Stroke id="mainLine" color="0x444444"
weight="2" />
                </mx:lineStroke>
                </mx:LineSeries>
        </mx:series>

     </mx:LineChart>
  </mx:Canvas>
</mx:Application>