1 Reply Latest reply on Nov 24, 2010 10:04 PM by BhaskerChari

    Line Chart with One Data Value - label too far left

    Gregory Lafrance Level 6

      In the following line chart with a single data value, the label is positioned too far to the left.

       

      The data does not display, but I'm only concerned with gettng the label to at least appear within the chart area, and not all the way to the left. I've tried styles for chart, axisrenderer, etc but no luck.

       

      <?xml version="1.0"?>
      <!-- charts/BasicLine.mxml -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Script><![CDATA[
           import mx.collections.ArrayCollection;
           [Bindable]
           public var expenses:ArrayCollection = new ArrayCollection([
              {Month:"Jan", Profit:2000, Expenses:1500, Amount:450}
           ]);
        ]]></mx:Script>
        <mx:Panel title="Line Chart">
           <mx:LineChart id="myChart" 
              dataProvider="{expenses}" 
              showDataTips="true"
           >
              <mx:horizontalAxis>
                 <mx:CategoryAxis 
                      dataProvider="{expenses}" 
                      categoryField="Month"
                  />
              </mx:horizontalAxis>
              <mx:series>
                 <mx:LineSeries 
                      yField="Expenses" 
                      displayName="Expenses"
                 />
              </mx:series>
           </mx:LineChart>
        </mx:Panel>
      </mx:Application>
      


      LineChart.png

        • 1. Re: Line Chart with One Data Value - label too far left
          BhaskerChari Level 4

          @ Gregory Lafrance,

           

          You can specify the itemRenderer property for the LineSeries to display the single data point.

           

          Also in order to align the x-axis label properly you can make use of the DateTimeAxis for the horizontal axis instead of Category axis and use a label function to format the label display name on the x-axis. You can format the label which ever way you want in the labelFunction.

           

          Here is the sample code..

           

          <?xml version="1.0"?>
          <!-- charts/BasicLine.mxml -->
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script><![CDATA[
             import mx.formatters.DateFormatter;
               import mx.collections.ArrayCollection;
               [Bindable]
               public var expenses:ArrayCollection = new ArrayCollection([
                  {Month:"Jan", date:"10/25/2010", Profit:2000, Expenses:1500, Amount:450}
               ]);
              
              private function formatDateLabel(value:Date,previousValue:Date,axis:DateTimeAxis):String 
              {
                  return value.toDateString();
              }
            ]]></mx:Script>
            <mx:Panel title="Line Chart">
               <mx:LineChart id="myChart"
                  dataProvider="{expenses}"
                  showDataTips="true">
                  <mx:horizontalAxis>          
                      <mx:DateTimeAxis id="dateTimeAxis" labelFunction="formatDateLabel" dataUnits="days" alignLabelsToUnits="false" padding="0" baseAtZero="true"/>
                  </mx:horizontalAxis>
                  <mx:series>
                     <mx:LineSeries itemRenderer="mx.charts.renderers.CircleItemRenderer"
                          yField="Expenses" xField="date"
                          displayName="Expenses"
                     />
                  </mx:series>
               </mx:LineChart>
            </mx:Panel>
          </mx:Application>

           

          Thanks,

          Bhasker