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

[Mukesh]

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

[Danail Vasilev]

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

[Mukesh]

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

[Danail Vasilev]

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

[Kulveer]

Hi Mukesh,

I have HTML chart control with multiple series . I want to show custom static tooltip to  caption. Is it possible to add to column series in HTML chart control?  

Thanks