HTMLChart Tooltip position

6 posts, 0 answers
  1. Kya
    Kya avatar
    7 posts
    Member since:
    Nov 2011

    Posted 30 Sep 2013 Link to this post

    Hello,

    I've set up an HTMLChart Column Chart.  The tooltips appear on the right of each column when hovering over the column.  For the columns at the far right side of the chart, this means the tooltips are squished and unreadable.  Is there a way to change the position of the tooltips so the ones on the right side of the chart can be fully seen?

    Thanks.
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 02 Oct 2013 Link to this post

    Hello Kya,

    The tooltip is a single div element whose position and content are changed dynamically depending on the hovered series. I am afraid this behavior cannot be changed and having several tooltips always shown is not possible at this point.


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kya
    Kya avatar
    7 posts
    Member since:
    Nov 2011

    Posted 06 Oct 2013 Link to this post

    Thanks Marin,

    I think you misunderstood my question.  I don't want to have the tooltip always visible.  The tooltips for the columns on the right side of the chart are cut off when they appear because they are positioned to the right of the column, and don't show past the edge of the chart.  See the attached screenshot.  I have a chart in a panel in a RadPageView which is part of a RadMultiPage.  In the attached image my mouse is not seen, but it is hovering over the column on the far right.  You can see the tooltip is cut off.  How do I fix this?

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 08 Oct 2013 Link to this post

    Hello,

    I tried this scenario and things seem to work fine for me, the tooltips detect the edge of the available viewport (in my test case - of the pageView's iframe) and position themselves properly:
    <telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1">
        <Tabs>
            <telerik:RadTab Text="first" Selected="true">
            </telerik:RadTab>
            <telerik:RadTab Text="second">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage runat="server" ID="RadMultiPage1">
        <telerik:RadPageView runat="server" ID="RadPageView1" ContentUrl="somePage.aspx">
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" ID="RadPageView2" ContentUrl="Default.aspx" Height="500px" Width="620px">
        </telerik:RadPageView>
    </telerik:RadMultiPage>

    and for the default page:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="300px">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries>
                <TooltipsAppearance>
                    <ClientTemplate>
                        some text: #= value #
                        <br />
                        more text
                    </ClientTemplate>
                </TooltipsAppearance>
                </telerik:ColumnSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>

    protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < 50; i++)
        {
            CategorySeriesItem item = new CategorySeriesItem(i);
            (RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).SeriesItems.Add(item);
        }
    }


    I am attaching here a video from my test so you can see how things work on my end and confirm if I am missing something.

    I would also advise that you see if upgrading to the latest controls helps. Currently the Q3 2013 BETA release is the latest one, with the official Q3 2013 being planned for the middle of the next week.

    You can also check for the following things:
    - custom CSS on the page that may be affecting the chart. Especially global rules like div { /*something*/ }
    - parent elements in the chart with special positioning (e.g. its direct parent, the form, the body) that may be affecting (and offestting) the positioning logic of the tooltips

    These are easiest tested by removing all custom CSS from the page to see if the behavior changes.

    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Kya
    Kya avatar
    7 posts
    Member since:
    Nov 2011

    Posted 08 Oct 2013 Link to this post

    Thanks so much, Marin.

    You helped me identify the issue.  My chart was nested deep within a div with a css class which had overflow set to hidden.  Removing that solved the problem.
  7. Phuong
    Phuong avatar
    1 posts
    Member since:
    Jun 2014

    Posted 01 Jun 2014 in reply to Marin Bratanov Link to this post

    i dont custom CSS on the page that may be affecting the chart
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017