Programmatically set column labels in HTMLChart

Question

See Telerik column chart demo here. Notice the labels above each column, such as "25000 sales". Now notice in the declarative code how this label is set:

<LabelsAppearance DataFormatString="{0} sales" Position="OutsideEnd"></LabelsAppearance>

I either need to set DataFormatString programmatically, or (better yet) I need to set it to the value of a column in my dataset from sql server. This column's data is not on the chart currently because I ONLY want that column's data used at the label at the top of each column. I can't figure out how to do either. How is it done?

score 1 · Answer 1 · answered Sep 08 '15 at 11:54

By using the ClientTemplate: http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/overview

You can set it in the markup or the code-behind:

                    <telerik:ColumnSeries>
                        <LabelsAppearance>
                            <ClientTemplate>
                                  #=dataItem.someColumn#
                            </ClientTemplate>
                        </LabelsAppearance>
                    </telerik:ColumnSeries>

or for an already existing chart:

(RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).LabelsAppearance.ClientTemplate= "#=dataItem.someColumn#";

where of course you can access the series any way you like.

Programmatically set column labels in HTMLChart

1 Answers1