In Telerik, RadHtmlChart, not getting date format in tooptip as same like on X-axis label rendered

Question

RadHtmlChart not bind tooltip properly but same it is working as for X-axis label. I tried to set tooltip with client template and dataformatstring also but still no success for display tooltip date format just showing in numbers only.

Please refer my below code sample with image illustrated with problem.

[Telerik RadHtmlChart display value on hover issue for date field on X-axis][1] [1]: https://i.stack.imgur.com/x5Dqk.png

--> My RadHtmlChart code

TestChart.aspx

<Telerik:RadHtmlChart runat="server" ID="AnnexRadHtmlChart" Width="1400px" Height="650px"></Telerik:RadHtmlChart>

TestChart.aspx.cs

protected void Page_Load(object sender, EventArgs e)
    {
        BindChart();
    }

protected DataSet GetData()
{
    DataSet dataSet = new DataSet();

    List<string> ListTab = new List<string>();
    ListTab.Add("Plan");
    ListTab.Add("Actual");
    ListTab.Add("Earned Value");

    foreach (var tab in ListTab)
    {
        DataTable dt = dataSet.Tables.Add(tab);

        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("AnnexAmount", typeof(int));
        dt.Columns.Add("AnnexDate", typeof(DateTime));
        dt.Columns.Add("AnnexTabName", typeof(string));

        if (tab.Trim().ToLower() == "plan")
        {
            dt.Rows.Add(1, 50000, new DateTime(2015, 06, 12), tab);
            dt.Rows.Add(1, 150000, new DateTime(2016, 12, 12), tab);
            dt.Rows.Add(1, 200000, new DateTime(2018, 06, 17), tab);
            dt.Rows.Add(1, 250000, new DateTime(2020, 09, 18), tab);

        }
        else if (tab.Trim().ToLower() == "actual")
        {
            dt.Rows.Add(2, 100000, new DateTime(2015, 07, 12), tab);
            dt.Rows.Add(2, 180000, new DateTime(2016, 12, 12), tab);
            dt.Rows.Add(2, 230000, new DateTime(2018, 07, 17), tab);
            dt.Rows.Add(2, 250000, new DateTime(2020, 09, 18), tab);

        }
        else
        {
            dt.Rows.Add(3, 100000, new DateTime(2015, 03, 12), tab);
            dt.Rows.Add(3, 200000, new DateTime(2016, 12, 12), tab);
            dt.Rows.Add(3, 250000, new DateTime(2018, 05, 17), tab);
            dt.Rows.Add(3, 350000, new DateTime(2020, 08, 18), tab);
        }
     
    }
    return dataSet;
}

public void BindChart()
{
    #region X-AXIS ITEM

    AnnexRadHtmlChart.PlotArea.XAxis.TitleAppearance.Text = "Month";
    AnnexRadHtmlChart.PlotArea.XAxis.LabelsAppearance.DataFormatString = "{0:MMM/yyyy}";
    AnnexRadHtmlChart.PlotArea.XAxis.Type = Telerik.Web.UI.HtmlChart.AxisType.Date;
    AnnexRadHtmlChart.PlotArea.XAxis.BaseUnit = DateTimeBaseUnit.Days;
    AnnexRadHtmlChart.PlotArea.XAxis.MajorTickType = TickType.Outside;
    AnnexRadHtmlChart.PlotArea.XAxis.MinorTickType = TickType.Outside;
    AnnexRadHtmlChart.PlotArea.XAxis.MajorGridLines.Color = Color.DarkSeaGreen;
    AnnexRadHtmlChart.PlotArea.XAxis.MinorGridLines.Color = Color.Bisque;
    AnnexRadHtmlChart.PlotArea.XAxis.TitleAppearance.Position = AxisTitlePosition.Center;
    AnnexRadHtmlChart.PlotArea.XAxis.TitleAppearance.RotationAngle = 0;

    #endregion

    #region Y-AXIS ITEM

    AnnexRadHtmlChart.PlotArea.YAxis.TitleAppearance.Text = "Value";
    AnnexRadHtmlChart.PlotArea.YAxis.LabelsAppearance.DataFormatString = "{0:N}";
    AnnexRadHtmlChart.PlotArea.YAxis.MajorTickType = TickType.Outside;
    AnnexRadHtmlChart.PlotArea.YAxis.MinorTickType = TickType.Outside;
    AnnexRadHtmlChart.PlotArea.YAxis.MajorTickSize = 1;
    AnnexRadHtmlChart.PlotArea.YAxis.MinorTickSize = 1;
    AnnexRadHtmlChart.PlotArea.YAxis.LabelsAppearance.RotationAngle = 0;
    AnnexRadHtmlChart.PlotArea.YAxis.MajorGridLines.Color = Color.DarkSeaGreen;
    AnnexRadHtmlChart.PlotArea.YAxis.MajorGridLines.Width = 1;
    AnnexRadHtmlChart.PlotArea.YAxis.MinorGridLines.Color = Color.PaleGreen;
    AnnexRadHtmlChart.PlotArea.YAxis.MinorGridLines.Width = 1;
    AnnexRadHtmlChart.PlotArea.YAxis.TitleAppearance.Position = AxisTitlePosition.Center;
    AnnexRadHtmlChart.PlotArea.YAxis.TitleAppearance.RotationAngle = 0;

    #endregion

    DataSet dataSet = GetData();

    List<Color> ListColors = new List<Color>();
    ListColors.Add(Color.IndianRed);
    ListColors.Add(Color.Teal);
    ListColors.Add(Color.Purple);
    ListColors.Add(Color.SlateGray);

    for (int i = 0; i < dataSet.Tables.Count; i++)
    {
        DataTable dt = dataSet.Tables[i];

        ScatterLineSeries scatterLineSeries = new ScatterLineSeries();
        scatterLineSeries.Name = dt.Rows[0]["AnnexTabName"].ToString() + " Data";
        scatterLineSeries.Appearance.FillStyle.BackgroundColor = ListColors[i];
        scatterLineSeries.MarkersAppearance.BackgroundColor = Color.AntiqueWhite;
        scatterLineSeries.LabelsAppearance.Visible = false;
        scatterLineSeries.TooltipsAppearance.DataFormatString = "Month/Year : {0:D} </br> Value : {1:N} </br> Tab Name : " + dt.Rows[0]["AnnexTabName"].ToString() + "";
        scatterLineSeries.TooltipsAppearance.Color = Color.LightPink;

        foreach (DataRow dr in dt.Rows)
        {
            DateTime dateTime = Convert.ToDateTime(dr.ItemArray[2].ToString());
            decimal dtValue = ConvertToJavaScriptDateTime(dateTime);
            ScatterSeriesItem scatterSeriesItem = new ScatterSeriesItem(dtValue, Convert.ToDecimal(dr.ItemArray[1].ToString()));

            scatterLineSeries.SeriesItems.Add(scatterSeriesItem);
        }

        AnnexRadHtmlChart.PlotArea.Series.Add(scatterLineSeries);
        AnnexRadHtmlChart.ChartTitle.Text = "Annex Data Chart";
        AnnexRadHtmlChart.Legend.Appearance.Position = ChartLegendPosition.Bottom;
        AnnexRadHtmlChart.Appearance.FillStyle.BackgroundColor = Color.Beige;
    }
}

protected decimal ConvertToJavaScriptDateTime(DateTime fromDate)
{
    return (decimal)fromDate.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds;
}

Answer 1

I think tooltips use JS to format the value while I see some custom formats in your code. Maybe if you want to be sure you control the format from C# maybe add a column to the data source where you put the string yourself and then use that in the tooltip via its template