Labels Formatting

Formatting ChartAxisX labels

When the values on X axis are populated from the chart data source and they shown values from CategoricalValuesField you can format them by using ChartAxisX.DataFormatString. For example if you have currency trend into the database and the categorical values for x axis show the currency you can show the data with related currency symbol by using DataFormatString="{0:C}":

<shield:ShieldChart ID="ShieldChart1" runat="server" 
    OnTakeDataSource="ShieldChart1_TakeDataSource">
    <Axes>
        <shield:ChartAxisX  DataFormatString="{0:C}" 
            CategoricalValuesField="CValue"></shield:ChartAxisX>
    </Axes>
...

The axis tick text can be formatted by using the Format property which corresponds to the client side format property:

<Axes>
    <shield:ChartAxisX> 
        <AxisTickText Format="{text} %" ></AxisTickText>
    </shield:ChartAxisX>
    <shield:ChartAxisY>
        <Title Text="Low/High Values"></Title>
    </shield:ChartAxisY>
</Axes>

The other approach to format the axis tick text is to use the AxisTickText.FormatClientCallbackFunction property which takes the client side callback function as parameter:

<Axes>
    <shield:ChartAxisX AxisType="Datetime"> 
        <AxisTickText FormatClientCallbackFunction="FormatAxis"></AxisTickText>
    </shield:ChartAxisX>
    <shield:ChartAxisY>
        <Title Text="Low/High Values"></Title>
    </shield:ChartAxisY>
</Axes>

    function FormatAxis(pointValue, chart) {
        var formatedValue = // format pointValue value
        return formatedValue;
    }

Formatting data point labels
To format the data points text you can use the DataPointText.FormatClientCallbackFunction property which takes the client side callback function as parameter:

<DataSeries>
    <shield:ChartRangeBarSeries CollectionAlias="Low/High" 
        DataFieldLow="low" DataFieldHigh="high">          
        <Settings>
            <DataPointText 
             FormatClientCallbackFunction="FormatDataPoints"></DataPointText>
        </Settings>                   
    </shield:ChartRangeBarSeries>
</DataSeries>

    function FormatDataPoints(pointValue, chart) {
        var formatedValue = // format pointValue value
        return formatedValue;
    }