Telerik html chart - tooltip position, series item border, series item smooth edge.

4 posts, 0 answers
  1. Mukesh
    Mukesh avatar
    5 posts
    Member since:
    Jun 2013

    Posted 31 Jan 2014 Link to this post

    Hi,

       How to achieve the following scenario.

      1. Tool-tip position in RadHtmlChart - bar and column series.
      2. how to set border width to series item - bar and column series.
      3. how to set smooth edge in column and bar chart.

    Technical details:

    Version: Telerik.Web.UI.dll 2013.2.730.40
    Operating System: windows 7
    .Net Framework: 4.0
    Visual studio: 2010
    Browser: Firefox 26.0



  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 04 Feb 2014 Link to this post

    Hi Mukesh,

    Please find below my answers to your questions:
    • Position tooltip - RadHtmlChart tooltips cannot be move out of the box. Since, however, they are rendered as pure HTML you can handle the series hovered event and offset their left position. For example:

    JavaScript:

    <script lang="javascript">
        function OnClientSeriesHovered(sender, args) {
            setTimeout(function () {
                var newLeft = (parseInt(sender.get_element().children[1].style.left) - 56) + "px";
                sender.get_element().children[1].style.left = newLeft;
            }, 270);
        }
    </script>
    ASPX:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px" OnClientSeriesHovered="OnClientSeriesHovered">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries>
                    <Appearance>
                        <FillStyle BackgroundColor="green" />
                    </Appearance>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="10" />
                        <telerik:CategorySeriesItem Y="20" />
                    </SeriesItems>
                </telerik:ColumnSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    Note, however, that there may be some flickering because the tooltips will be firstly positioned in their initial state and then offset.
    • Set border width to series - The properties can be set through the chartObject, as illustrated in this feedback item. For example:
    function pageLoad() {
        var chart = $find("RadHtmlChart1");
        chart._chartObject.options.series[0].border = {
            width: 0
        }
        chart.repaint();
    }
    • Smooth edges - Currently the feature is not available.

    Regards,
    Danail Vasilev
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mukesh
    Mukesh avatar
    5 posts
    Member since:
    Jun 2013

    Posted 08 Feb 2014 in reply to Danail Vasilev Link to this post

    Hi Danail Vasilev,

                Thank you. Tooltip position and removing column chart border are worked nice... thanks a lot...
    Consider smooth edge for column and bar charts in next version / future release.

    With Regrds,

    Mukesh KM
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 11 Feb 2014 Link to this post

    Hello Mukesh,

    I have logged your idea in our feedback portal here, so that you can monitor, comment or raise its priority by voting on it.

    As a small token of gratitude for sharing your ideas with us I have updated your Telerik points.

    Regards,
    Danail Vasilev
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top