Rad Chart background image

4 posts, 0 answers
  1. talha
    talha avatar
    7 posts
    Member since:
    Sep 2010

    Posted 14 Sep 2010 Link to this post


    can you please guide me on how to set an image on to a chart background, ive tried everything but im unable to set a background to my chart it always shows blank, do also please guide me on where to put the image file in order to reference it.

  2. Evgenia
    Evgenia avatar
    1437 posts

    Posted 15 Sep 2010 Link to this post

    Hi talha,

    Thank you for contacting us. To set an image as background of your chart do the following:
    1. Add new folder to your Web Site in Visual Studio. Paste your image there. In my code snippet below the folder is named Images.
    2. Add this code snippet in your Default.aspx between <telerik:radChart> and </telerik:radChart>
      <Appearance FillStyle-FillSettings-BackgroundImage="~/Images/Penguins.jpg" FillStyle-FillType="Image"></Appearance>
    Hope this guides you appropriately.

    All the best,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Walther Siksma
    Walther Siksma avatar
    12 posts
    Member since:
    May 2006

    Posted 25 Sep 2014 Link to this post

    Is there a way to do this in code behind as well? I build the graphs dynamically in code and then add them to a placeholder.  I would like to set a background image to the radhtmlchart as well.   did find the chart.Appearance.FillStyle object, but this contains backgroundcolor and viewstate properties only. 
  4. Danail Vasilev
    Danail Vasilev avatar
    1502 posts

    Posted 29 Sep 2014 Link to this post

    Hi Walther,

    I can suggest that you do the following:
      - Leave the transparent background color of the chart's plot area.
      - Wrap the chart inside a div element.
      - Set the desired background image to the chart's wrapper.

    For example:
        .chartWrapper {
            width: 600px;
            height: 400px;
            background-image: url('some-background-image.png');
            <div class="chartWrapper">
                <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">

    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.

Back to Top