Edit this page

Problem with Using Formatting Specifiers in Labels and Tooltips

Specifying date format strings(e.g.{0:D}, {0:F}) are not supported out-of-the-box and will not take effect if used In the DataFormatString property of the RadHtmlChart control. Only the numeric format strings (e.g. {0:e}, {0:p}) are supported for the text elements (such as axis labels, series labels and tooltips).

note

As of Q3 2012 , the ClientTemplate property can expose additional columns for the series labels and tooltips. With this you are able to specify a date set as a simple string.

Nevertheless, there is a possible approach that will allow you to format the labels in a non-numerical x-axis. For example,let’s take the items in an x-axis whose labels should display a month given an object of type DateTime. Follow these steps to format the labels accordingly:

  1. On the server side, iterate through the data source that is used for populating the x-axis items.
  2. Get the DateTime value of the current data source record.
  3. Convert the DateTime value to a string using the appropriate formatting specifier.
  4. Create a new AxisItem object by passing the formatted string as a parameter and add it in the Items collection of the x-axis.

Example 1 demonstrates the approach described above.

warning

This approach cannot be used for creating such specially formatted text in SeriesItems' labels and tooltips. Each Series-Item does not have its own tooltip and text properties that can be set declaratively, they are taken from its value automatically. An option is using their ClientTemplates to load a column from the datasource.

You cannot use the DataFormatString property of the x-axis labels either because the x-axis items are created programmatically and are not data bound.

Example 1: Using date format string in RadHtmlChart.

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Height="500px" Width="500px">
    <PlotArea>
        <Series>
            <telerik:LineSeries Name="Market share in 2011" DataField="MarketShare2011">
                <TooltipsAppearance Visible="false" />
            </telerik:LineSeries>
        </Series>
        <XAxis>
            <LabelsAppearance RotationAngle="90" />
        </XAxis>
        <YAxis MaxValue="50">
        </YAxis>
    </PlotArea>
    <Legend>
        <Appearance Visible="false" />
    </Legend>
    <ChartTitle Text="Chrome market share in 2011">
    </ChartTitle>
</telerik:RadHtmlChart>
protected void Page_Load(object sender, EventArgs e)
{
    RadHtmlChart1.DataSource = GetChartData();
    RadHtmlChart1.DataBind();

    foreach (MarketShareData item in GetChartData())
    {
        string formattedLabelText = string.Format("{0:MMMM}", item.Date);
        AxisItem newAxisItem = new AxisItem(formattedLabelText);
        RadHtmlChart1.PlotArea.XAxis.Items.Add(newAxisItem);
    }
}

private List<MarketShareData> GetChartData()
{
    List<MarketShareData> chromeData = new List<MarketShareData>();

    chromeData.Add(new MarketShareData(23.8, new DateTime(2011, 1, 1)));
    chromeData.Add(new MarketShareData(24.1, new DateTime(2011, 2, 1)));
    chromeData.Add(new MarketShareData(25.0, new DateTime(2011, 3, 1)));
    chromeData.Add(new MarketShareData(25.6, new DateTime(2011, 4, 1)));
    chromeData.Add(new MarketShareData(25.9, new DateTime(2011, 5, 1)));
    chromeData.Add(new MarketShareData(27.9, new DateTime(2011, 6, 1)));
    chromeData.Add(new MarketShareData(29.4, new DateTime(2011, 7, 1)));
    chromeData.Add(new MarketShareData(30.3, new DateTime(2011, 8, 1)));
    chromeData.Add(new MarketShareData(30.5, new DateTime(2011, 9, 1)));
    chromeData.Add(new MarketShareData(32.3, new DateTime(2011, 10, 1)));
    chromeData.Add(new MarketShareData(33.4, new DateTime(2011, 11, 1)));
    chromeData.Add(new MarketShareData(34.6, new DateTime(2011, 12, 1)));

    return chromeData;
}

public class MarketShareData
{
    public MarketShareData(double marketShare2011, DateTime date)
    {
        _date = date;
        _marketShare2011 = marketShare2011;
    }
    private DateTime _date;
    public DateTime Date
    {
        get { return _date; }
        set { _date = value; }
    }
    private double _marketShare2011;
    public double MarketShare2011
    {
        get { return _marketShare2011; }
        set { _marketShare2011 = value; }
    }
}
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
    RadHtmlChart1.DataSource = GetChartData()
    RadHtmlChart1.DataBind()

    For Each item As MarketShareData In GetChartData()
        Dim formattedLabelText As String = String.Format("{0:MMMM}", item.[Date])
        Dim newAxisItem As New AxisItem(formattedLabelText)
        RadHtmlChart1.PlotArea.XAxis.Items.Add(newAxisItem)
    Next
End Sub

Private Function GetChartData() As List(Of MarketShareData)
    Dim chromeData As New List(Of MarketShareData)()

    chromeData.Add(New MarketShareData(23.8, New DateTime(2011, 1, 1)))
    chromeData.Add(New MarketShareData(24.1, New DateTime(2011, 2, 1)))
    chromeData.Add(New MarketShareData(25.0, New DateTime(2011, 3, 1)))
    chromeData.Add(New MarketShareData(25.6, New DateTime(2011, 4, 1)))
    chromeData.Add(New MarketShareData(25.9, New DateTime(2011, 5, 1)))
    chromeData.Add(New MarketShareData(27.9, New DateTime(2011, 6, 1)))
    chromeData.Add(New MarketShareData(29.4, New DateTime(2011, 7, 1)))
    chromeData.Add(New MarketShareData(30.3, New DateTime(2011, 8, 1)))
    chromeData.Add(New MarketShareData(30.5, New DateTime(2011, 9, 1)))
    chromeData.Add(New MarketShareData(32.3, New DateTime(2011, 10, 1)))
    chromeData.Add(New MarketShareData(33.4, New DateTime(2011, 11, 1)))
    chromeData.Add(New MarketShareData(34.6, New DateTime(2011, 12, 1)))

    Return chromeData
End Function


Public Class MarketShareData
    Public Sub New(marketShare2011 As Double, [date] As DateTime)
        _date = [date]
        _marketShare2011 = marketShare2011
    End Sub
    Private _date As DateTime
    Public Property [Date]() As DateTime
        Get
            Return _date
        End Get
        Set(value As DateTime)
            _date = value
        End Set
    End Property
    Private _marketShare2011 As Double
    Public Property MarketShare2011() As Double
        Get
            Return _marketShare2011
        End Get
        Set(value As Double)
            _marketShare2011 = value
        End Set
    End Property
End Class

See Also