Using a backgroun image

[John Giblin]

I am not sure how to add a background image to a legend dynamically.  But I tried to the following without success:

        protected void rcOvernightByHHour_PrePaint(object sender, EventArgs e)
        {
            foreach (Telerik.Charting.LabelItem legend in rcOvernightByHHour.Legend.Items)
            {
                legend.Appearance.FillStyle.FillSettings.BackgroundImage = "C:\\images\\networks\\" + legend.Name + ".jpeg";

            }
        }

[Ves]

Hi John Giblin,

You will also need to set the FillType property:

foreach (Telerik.Charting.LabelItem legend in RadChart1.Legend.Items)
{
    legend.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Image;
    legend.Appearance.FillStyle.FillSettings.BackgroundImage = "C:\\images\\networks\\" + legend.Name + ".jpeg";
}

Kind regards,
Ves
the Telerik team

[John Giblin]

thanks Ves,

I was able to get the image to display.  But what happens is that I see the image in the background.  I know it a background image but in the documentation you see the flag and the name.  What I wanted to see in the legend was: "Icon Image Text". Is there a way to do that

 

[Ves]

Hi John Giblin,

I am not really sure I am following you. If you need the image to appear within the legend item marker you can update the lines in the loop like this:

foreach (Telerik.Charting.LabelItem legend in RadChart1.Legend.Items)
{
    legend.Marker.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Image;
    legend.Marker.Appearance.FillStyle.FillSettings.BackgroundImage = "C:\\images\\networks\\" + legend.Name + ".jpeg";
}

If that is not really what you need, please provide more details about the expected result. You can attach an image or a simple scratch.

Best regards,
Ves
the Telerik team

[John Giblin]

in the Legend I want it to be the following

[Ves]

Hello John,

Unfortunately this is not directly supported. You can create your own composite images, which will contain the default legend item marker and your image. Then use these images as markers:

foreach (Telerik.Charting.LabelItem legend in RadChart1.Legend.Items)
{
    legend.Marker.Appearance.Dimensions.AutoSize = false;
    legend.Marker.Appearance.Dimensions.Width = Telerik.Charting.Styles.Unit.Pixel(50);
    legend.Marker.Appearance.Dimensions.Height = Telerik.Charting.Styles.Unit.Pixel(16);
    legend.Marker.Appearance.Figure = "Rectangle";
    legend.Marker.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Image;
    legend.Marker.Appearance.FillStyle.FillSettings.BackgroundImage = "C:\\images\\networks\\" + legend.Name + ".jpeg";
}

Best regards,
Ves
the Telerik team