Background image size

[Jonathan]

I have been experimenting with images in the backgrounds of the chart axis labels

1. They seem to be rendered larger then they actually are. (see attached screen capture showing the image in a table outside the chart and as an axis label background image set to align mode) 
2. Can I control the displayed size of the aligned background image without recreating the image and saving a smaller version of it? I do need to also display the text in the axis label as well as seen in the attached image.  
3. I know I can limit the size of the image if I use the stretch option and limit the size of the textbox but I don't want the image to interfere with the space used by the text and overlap. I used the stretch option on the 3rd instance of the logo in the attached file and it works for me in that case because I am not using any text on that label - the icon is sufficient for that chart. 

To clarify what you see in the attached image is:
Icon instance 1 and 2 came from the same page - but instance 1 is not part of the chart but instance 2 is part of the chart and the chart one seems bigger and I don't know why. Icon instance 3 is scaled down by using the stretch option of the label background and limiting the size of the label text area. 

The following is the code I'm currently using to insert the image in the chart.

ChartAxisItem xItem = RadChartRiding.PlotArea.XAxis[i];

xItem.TextBlock.Text = string.Format("{2}{0}\n{1}", r["firstName"], r["lastName"], (i == d.Rows.Count - 1 ? " - LEADER -\n" : ""));
xItem.TextBlock.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Image;
xItem.TextBlock.Appearance.FillStyle.FillSettings.BackgroundImage = string.Format("images/elections/{0}Icon.png", barCode[i]);
xItem.TextBlock.Appearance.Dimensions.AutoSize = false;

xItem.TextBlock.Appearance.FillStyle.FillSettings.ImageDrawMode = Telerik.Charting.Styles.ImageDrawMode.Align;
xItem.TextBlock.Appearance.FillStyle.FillSettings.ImageAlign = Telerik.Charting.Styles.ImageAlignModes.TopLeft;
xItem.TextBlock.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.TopRight;
xItem.TextBlock.Appearance.Dimensions.Height = 75;
xItem.TextBlock.Appearance.Dimensions.Width = 330;
xItem.TextBlock.Appearance.Dimensions.Paddings.Top = (i == d.Rows.Count - 1 ? 10 : 20);

 

[Giuseppe]

Hi Jonathan,

Thank you for contacting us.

We reviewed your description and the provided screenshot -- unfortunately the desired appearance cannot be achieved with the background image functionality (align the background image to the left and textblock to the right) so you would need option #3 with the stretching (you can try to tweak the images so they have a wide whitespace area to the right so it would not look like the image and the axis textblock overlap).


Regards,
Giuseppe
the Telerik team

[Jonathan]

Is there any explanation for why the image in the chart appears to be larger then the same image displayed outside the chart when the image mode is set to align?

Thanks for your help,

Jonathan

[Gimmik]

Hi Jonathan,

I imagine that the image is being stretched to fill the available area, or possibly the other image is being shrunk. I would use a tool like FireBug to determine exactly which image is being manipulated and adjust it. You might need to crunch the numbers and do the pixel math to determine what size the image should be. Then just break out Photoshop and make a different logo with more or less pixel padding.

Let me know if that works for you,
-Gimmik