Need More Info
Last Updated: 09 Jan 2026 08:39 by ADMIN
Craig
Created on: 08 Jan 2026 00:01
Category: HtmlChart
Type: Bug Report
0
RadChart BackgroundImage

I am struggling with setting the BackgroundImage on a series item in RadChart control. The problem i am having is, the background image works fine in my local environment, and on our Dev and QA server. Note the down arrow background images below.

 It does not, however work in our demo or production environments. It is running the same code in the a very similar environment. I ensured that the files are present on the server. It just doesn't seem to want to load them.

Hoping you can provide some insights.

Thanks

3 comments
ADMIN
Rumen
Posted on: 09 Jan 2026 08:39

Hi Craig,

Thanks for the RadChart snippet - that helps. Since RadChart can resolve background images differently depending on how the chart is rendered (on-page vs export/print), there are a couple of ways to set BackgroundImage. Please try the options below to see which one matches your scenario.

Option 1 - Client-accessible URL (on-page rendering)

If the chart is rendered directly on the page and the browser is responsible for loading the image, use a resolved URL (this also handles deployments under a virtual directory):

item.Appearance.FillStyle.FillSettings.BackgroundImage = ResolveClientUrl("~/images/bkgSavingsXLarge.png");

Option 2 - Physical file path (export / print scenarios)

If the issue occurs only in printed or exported output, RadChart may need a physical file path so it can load the image server-side:

item.Appearance.FillStyle.FillSettings.BackgroundImage = Server.MapPath("~/images/bkgSavingsXLarge.png");

Additional notes

  • Avoid using backslashes (for example ~\Images\...) - use forward slashes and resolve the path explicitly.
  • Hard-coded absolute paths (for example C:\...) are not recommended for production deployments.
  • If the image is expected to load via URL, please verify it is accessible directly in the browser and not blocked by IIS or web.config rules:
    https://<your-domain>/<your-app-if-any>/images/bkgSavingsXLarge.png

Please try both options and let us know:

  • whether the background image is missing in the on-page chart, exported/printed output, or both
  • which of the two approaches works in your Production environment

I understand your point, RadChart can be a good fit for scenarios where the end goal is a static PNG image for printed reports, which is why the above steps focus on making it work reliably in your current setup. That said, for completeness, RadHtmlChart also supports server-side export to PNG and PDF, which can cover similar reporting scenarios while using a newer rendering pipeline:

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources
Craig
Posted on: 08 Jan 2026 18:27

I am using RadChart, NOT RadHtmlChart. I realize RadChart has been deprecated, but the original RadChart is much more appropriate for my needs - a png graphic for a printed report.

Here’s the snippet of code where I am setting the background image on the ChartSeriesItem. 

        item.Appearance.FillStyle.MainColor = Color.Transparent;

        item.Appearance.FillStyle.SecondColor = Color.Transparent;

        item.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Image;

        item.Appearance.FillStyle.FillSettings.BackgroundImage = "~/images/bkgSavingsXLarge.png";

ADMIN
Rumen
Posted on: 08 Jan 2026 13:40

Hi Craig,

Thank you for reaching out. Based on your screenshots, it appears you're using RadHtmlChart (not the deprecated RadChart). Since the background images work in your local, Dev, and QA environments but not in Production, this suggests an environment-specific configuration or resource access issue.

Troubleshooting Steps:

  1. Browser Developer Tools - Network Tab
    • Open DevTools (F12) and check the Network tab when the chart loads
    • Look for failed requests (404, 403 errors) for your down-arrow image files
    • Check if the image paths are being blocked or returning errors
  2. Browser Console - JavaScript Errors
    • Check the Console tab in DevTools for any JavaScript errors
    • RadHtmlChart renders client-side, so JS errors could prevent proper rendering
  3. Image Path Configuration
    • Use application-relative paths: ~/Images/down-arrow.png
    • Avoid absolute paths or hard-coded server names that may differ between environments
    • Verify the path resolves correctly in production
  4. File Existence and Accessibility
    • Confirm the down-arrow.png files are deployed to the Demo/Production servers
    • Verify they're in the correct folder location
    • Check the files aren't corrupted or blocked
  5. IIS Permissions
    • Ensure the IIS application pool identity has read permissions for the image folder and files
    • Permission issues often differ between Dev and Production environments
  6. Case Sensitivity
    • "down-arrow.png" vs "Down-Arrow.png" matters on case-sensitive systems
  7. Web.config Review
    • Check for request filtering rules that might block image requests
    • Verify MIME types are configured for .png files
    • Look for any custom HTTP handlers that might interfere
  8. Direct Image Access Test
    • Try accessing the image directly in your browser: https://yourdomain.com/Images/down-arrow.png
    • If this fails, the issue is with file deployment or server configuration, not the chart

Could you please provide a code example showing how you're setting the BackgroundImage on the series items along with a screenshot of your DevTools Console and Network tab? This will help us provide more specific guidance if the above troubleshooting steps don't resolve the issue.

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources