Insert Image into a Column Series Telerik

Question

I need to add an image in a specific Column chart, but I have no idea how can I insert the image, any idea, tutorial ?

I am using the RadHtmlChart

this is my code:

 <telerik:RadHtmlChart ID="Chart" runat="server" Width="680" Height="500">
                                <PlotArea>
                                    <XAxis>
                                        <LabelsAppearance>
                                            <TextStyle Color="white" FontFamily="Arial" FontSize="13" />
                                        </LabelsAppearance>
                                    </XAxis>
                                    <YAxis MinValue="0" > 
                                        <LabelsAppearance DataFormatString="${0:0,0}">
                                            <TextStyle Color="white" FontFamily="Arial" FontSize="12" />
                                        </LabelsAppearance>
                                    </YAxis>

                                      <Series>
                                        <telerik:ColumnSeries Name="Garantías Vigentes" Stacked="true">

                                            <LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
                                                <TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" />
                                            </LabelsAppearance>
                                            <Appearance>
                                                <FillStyle BackgroundColor="#87cb50"></FillStyle>
                                            </Appearance>
                                            <SeriesItems>

                                            </SeriesItems>
                                        </telerik:ColumnSeries>
                                    </Series>

                                    <Series>
                                        <telerik:ColumnSeries Name="Saldo Vigente" Stacked="true">
                                            <LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
                                                <TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" />
                                            </LabelsAppearance>
                                            <Appearance>
                                                <FillStyle BackgroundColor="#8DB4E2"></FillStyle>
                                            </Appearance>
                                            <SeriesItems>
                                                <telerik:CategorySeriesItem Y="0"></telerik:CategorySeriesItem>
                                            </SeriesItems>
                                        </telerik:ColumnSeries>

                                       <telerik:ColumnSeries Name="" > //In this Column I need to insert the image
                                            <LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
                                                <TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="0" />
                                            </LabelsAppearance>
                                            <Appearance>

                                            </Appearance>
                                            <SeriesItems>
                                                <telerik:CategorySeriesItem Y="0"></telerik:CategorySeriesItem>
                                            </SeriesItems>
                                        </telerik:ColumnSeries>
                                    </Series> 
                                </PlotArea>
                                <Legend>
                                    <Appearance Position="Bottom"><TextStyle Color="white" FontFamily="Arial" FontSize="20" Bold="True"/></Appearance>
                                </Legend>
                            </telerik:RadHtmlChart>

I found in the forums Telerik but I can not find anything similar.

thanks for yours comments

Answer 1

I don't see where you have attempted to add an image, but this would be possible only inside a series tooltip, because this is the only place in the chart that renders HTML, the rest is SVG/VML.

Take a look at these articles to see how to add HTML to your tooltips and bind it to database data, if needed (e.g., for the src attribute):

http://www.telerik.com/help/aspnet-ajax/htmlchart-client-templates-for-tooltips-and-labels.html

http://www.telerik.com/help/aspnet-ajax/htmlchart-client-templates-for-tooltips-and-labels-execute-javascript-and-display-html.html