Una delle problematiche più frequenti nel design di un grafico è la sua adattabilità a spazi ristretti: sia un particolare layout di pagina che mere ragioni prestazionali (come abbiamo visto nello script #985), infatti, possono imporre pesanti vincoli alle dimensioni e riuscire a produrre un qualcosa che sia comunque leggibile e intuitivo spesso può costituire una vera e propria sfida. Consideriamo il grafico seguente:

Se ci limitiamo ad impostarne la dimensione a 250x200, il risultato che si ottiene è decisamente poco incoraggiante.

<asp:Chart ID="chart6" runat="server" Width="250" Height="200" ...>
  ...
</asp:Chart>

Il primo intervento, allora, deve essere mirato a ridurre l'occupazione degli elementi accessori e non funzionali, quali bordo o ombreggiature. Ad esempio, impostando su "None" la proprietà BorderSkin (o eliminando il relativo markup) e fissando a 0 la proprietà ShadowOffset del ChartArea per eliminare l'ombreggiatura, c'è già un guadagno considerevole di spazio, che può essere ulteriormente migliorato diminuendo le dimensioni del titolo e il relativo testo

<asp:Title Font="Arial Narrow, 10.25pt, style=Bold" Name="MainTitle"
           Text="Pageviews Aspitalia 1° trim. 2009">

Dall'ultima immagine si nota come la legenda, nella posizione di default, occupa un'area piuttosto vasta, che può essere limitata in diversi modi: innanzi tutto la si può posizionare in basso (Docking=Bottom), forzando gli elementi ad essere disposti tutti sulla stessa riga (LegendStyle=Row). Inoltre, dopo essersi assicurati che le dimensioni del testo siano calcolate dinamicamente (IsTextAutoFit=true), si può impostare ad un valore basso (es. 25%) la proprietà MaximumAutoSize, che indica la massima estensione possibile di questo elemento in relazione a tutta l'area del grafico. Ancora, è possibile regolare la dimensione minima del font di carattere (AutoFitMinFontSize), fissandola ad un valore intorno a 5, che rappresenta un buon compromesso tra dimensioni e leggibilità:

<asp:Legend Name="Legend1" BackColor="Transparent" Docking="Bottom"
    LegendStyle="Row" MaximumAutoSize="25" AutoFitMinFontSize="5">
</asp:Legend>

L'ultimo passo riguarda invece l'ottimizzazione delle dimensioni degli assi, per i quali la regola principale rimane ancora quella di attivare la funzionalità di AutoFit per le label (IsLabelAutoFit=true), impostando la minima dimensione del font (LabelAutoFitMinFontSize) e agendo sulla proprietà LabelAutoFitStyle per decidere la strategia da utilizzare nella disposizione automatica del testo.

<AxisX IsLabelAutoFit="true" Interval="1" IntervalType="Months" 
    LabelAutoFitMinFontSize="5" LabelAutoFitStyle="DecreaseFont">
    <LabelStyle Format="MMMM" />
</AxisX>

Un ulteriore ottimizzazione può riguardare la label dell'asse Y, per le quali si può scegliere una formattazione (ad es. basata sulle migliaia) che consenta di risparmiare spazio utile:

<AxisY Title="Page views (Migliaia)" TitleFont="Arial, 10.75pt"
    IsLabelAutoFit="true">
    <LabelStyle Format="0, K" />
</AxisY>

Il risultato finale, grazie a questi pochi accorgimenti, è decisamente accettabile.