retrieve x-axis value in the tooltip of ColumnChart

2 posts, 0 answers
  1. Somya
    Somya avatar
    1 posts
    Member since:
    Jan 2017

    Posted 18 Jan 2017 Link to this post


    I am creating htmlCharts dynamically from server side and trying to put a tooltip which shows both x and y axis values in the tooltip label.

    As everything is dynamic, I can only code from the server side. I tried using

    areaSeries.TooltipsAppearance.DataFormatString = "{0}% FCI in {1}Year";

    but it looks like that we can't use {1} for areaSeries.

    Then I tried using clientTemplate following the demo:

    but none of these tell how to code purely from server side. I am pasting my concerned code for better insight

    //To create chart

    RadHtmlChart htmlChartACIOverStudyPeriod = CreateHtmlChart("Year", "FCI", "%");
    htmlChartACIOverStudyPeriod.ChartTitle.Text = "FCI Over Study Period";
    htmlChartACIOverStudyPeriod.ID = "rhcFCIOverStudyPeriod";
    //To clear the plotarea and xaxis for the chart

     //To check if datatable has some value for selected agency and facility
    if (dtCurEstTotalOverStudyPeriod.Rows.Count > 0)
      int rowCount = 0;
      ColumnSeries columnSeries = new ColumnSeries();
      columnSeries.LabelsAppearance.Visible = false;

      //  columnSeries.TooltipsAppearance.DataFormatString = "{0}% FCI in {1}Year";
      columnSeries.TooltipsAppearance.ClientTemplate = " #=dataItem.CurEstTotal#  justForTest";

      for (Int32 intCurrent = intFiscalYear; intCurrent <= intMaxYear; intCurrent++)
        htmlChartACIOverStudyPeriod.PlotArea.XAxis.Items.Add(new AxisItem(intCurrent.ToString()));
      decimal ACI = 0;
      CategorySeriesItem categorySeriesItem = new CategorySeriesItem();
        //to check if row in the table exists
       if (rowCount < dtCurEstTotalOverStudyPeriod.Rows.Count)
        if (dtCurEstTotalOverStudyPeriod.Rows[rowCount]["AnoFiscalYear"].Equals(intCurrent))
         //To plot the y-axis
            ACI = (Convert.ToDecimal(dtCurEstTotalOverStudyPeriod.Rows[rowCount]["CurEstTotal"]) / CurEstReplOverStudyPeriod) * 100;
              ACI = 0;
       categorySeriesItem.Y = Math.Round(ACI, 3);


    this results into attached snapshot. Please help me to get x-axis value in the tooltip of ColumnChart.




  2. Stamo Gochev
    Stamo Gochev avatar
    208 posts

    Posted 23 Jan 2017 Link to this post

    Hi Somya,

    In order to use the #= dataItem # syntax, you need to bind the chart as explained here:

    However, it looks like you are creating the series items as individual objects, which does not provide such functionality:

    I am attaching a page, which demonstrates how to display both the series item value and the category in the tooltip. Please have a look at it and inform me if you have any further questions regarding it.

    Stamo Gochev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top