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
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.
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");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");~\Images\...) - use forward slashes and resolve the path explicitly.
C:\...) are not recommended for production deployments.
web.config rules:
https://<your-domain>/<your-app-if-any>/images/bkgSavingsXLarge.png
Please try both options and let us know:
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
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";
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.
~/Images/down-arrow.pnghttps://yourdomain.com/Images/down-arrow.pngCould 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