Translating RadHTMLChart (bar chart)

3 posts, 0 answers
  1. Kerry
    Kerry avatar
    3 posts
    Member since:
    Jun 2013

    Posted 23 Jun 2014 Link to this post

    The goal is to take an already finished rad bar chart and change the labels along the x axis to French.  My first thought was to try this:

      private void ProcessXAxis(ChartXAxis xAxis)
                if (xAxis == null || xAxis.Items == null) return;

                foreach (AxisItem item in xAxis.Items)
                    var replacementPhrase = GetFilteredReplacementPhrase(item.LabelText);
                    if (string.IsNullOrEmpty(replacementPhrase) || string.IsNullOrWhiteSpace(replacementPhrase)) continue;
                    item.LabelText = replacementPhrase;

    Trouble is, for this particular chart, there are no items in the collection.  Where the chart gets its labels, other than obviously from the data row column names, is beyond me.  Apparently I don't understand the ChartXAxis Item collection enough and assumed incorrectly it represented each data row. It doesn't.

    So, this leaves me with the question - how do I find the correct class containing the textblock that is obviously being generated in HTML as a "Text" element under the <g> element?  Please understand that all I have to work with at the point I am doing this processing is an already created chart.  I have no access to the data source and can only use the class trees available from Telerik.

  2. Danail Vasilev
    Danail Vasilev avatar
    1502 posts

    Posted 26 Jun 2014 Link to this post

    Hi KT,

    Could you please elaborate more about the control type you are using? Is this the RadHtmlChart or the obsolete RadChart control?

    If you mean RadHtmlChart, note that the control renders entirely on the client and therefore its series/category items are not available on the server (see Known Limitations help article). You can, however, modify them on the client as follows:
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        function OnClientClicked(sender, args) {
            var chart = $find("<%=ColumnChart1.ClientID%>");
            chart._chartObject.options.categoryAxis.categories[1] = "new Item Label";
    <telerik:RadButton ID="RadButton1" runat="server" Text="Change XAxis Labels" AutoPostBack="false" OnClientClicked="OnClientClicked" />
    <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
                <telerik:ColumnSeries Name="Product 1">
                        <telerik:CategorySeriesItem Y="15000" />
                        <telerik:CategorySeriesItem Y="23000" />
                        <telerik:CategorySeriesItem Y="10000" />
                    <telerik:AxisItem LabelText="Item 1" />
                    <telerik:AxisItem LabelText="Item 2" />
                    <telerik:AxisItem LabelText="Item 3" />

    Danail Vasilev

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. Kerry
    Kerry avatar
    3 posts
    Member since:
    Jun 2013

    Posted 27 Jun 2014 in reply to Danail Vasilev Link to this post

    Thanks for your time and answer.  It is the RadHTMLChart, and I suspected much of this is not obtainable server-side.

Back to Top