Get background Image when custom css

[Phong]

Hi all,

My snip code as below : 

public class Marble : ISkin
    {
        public Marble()
        {
        }

        public string GetCSS()
        {
            StringBuilder css = new StringBuilder();
            css.Append(@"
<Chart SkinName=""Marble"">
  <ChartTitle>
    <Appearance>
      <FillStyle MainColor=""Transparent"" />
      <Position AlignedPosition=""Top"" />
    </Appearance>
    <TextBlock>
      <Appearance>
        <TextProperties Font=""Arial, 22pt"" Color=""89, 79, 52"" />
      </Appearance>
    </TextBlock>
  </ChartTitle>
  <Legend>
    <Appearance Overflow=""Row"">
      <ItemTextAppearance>
        <TextProperties Color=""101, 91, 72"" Font=""Georgia, 9pt"" />
      </ItemTextAppearance>
      <FillStyle MainColor=""Transparent"" />
      <Position AlignedPosition=""Bottom"" />
      <Dimensions Margins=""17.6%, 3%, 1px, 1px"" />
      <Border Color=""Transparent"" />
    </Appearance>
  </Legend>
  <Appearance TextQuality=""AntiAlias"">
    <FillStyle FillType=""Image"">
      <FillSettings ImageDrawMode=""Flip"" BackgroundImage=""{chart}"" />
    </FillStyle>
    <Border Color=""181, 166, 132"" />
  </Appearance>
  <PlotArea>
    <XAxis>
      <Appearance Color=""Transparent"">
        <MajorGridLines PenStyle=""Solid"" Color=""94, 93, 87"" />
        <MajorTick Color=""173, 164, 142"" />
        <TextAppearance>
          <TextProperties Color=""101, 91, 72"" Font=""Georgia, 9pt"" />
        </TextAppearance>
      </Appearance>
      <AxisLabel>
        <TextBlock>
          <Appearance>
            <TextProperties Color=""101, 91, 72"" Font=""Georgia, 9pt"" />
          </Appearance>
        </TextBlock>
      </AxisLabel>
    </XAxis>
    <YAxis>
      <Appearance Color=""Transparent"">
        <MajorGridLines PenStyle=""Solid"" Color=""94, 93, 87"" />
        <MinorGridLines PenStyle=""Solid"" Color=""94, 93, 87"" />
        <MinorTick Color=""173, 164, 142"" />
        <MajorTick Color=""173, 164, 142"" />
        <TextAppearance>
          <TextProperties Color=""101, 91, 72"" Font=""Georgia, 9pt"" />
        </TextAppearance>
      </Appearance>
      <AxisLabel>
        <TextBlock>
          <Appearance>
            <TextProperties Color=""101, 91, 72"" Font=""Georgia, 9pt"" />
          </Appearance>
        </TextBlock>
      </AxisLabel>
    </YAxis>
    <Appearance>
      <FillStyle FillType=""Image"">
        <FillSettings ImageDrawMode=""Flip"" BackgroundImage=""{plotarea}"" ImageAlign=""Top"" ImageFlip=""FlipY"" />
      </FillStyle>
      <Dimensions Margins=""22%, 24%, 12%, 10%"" />
      <Border Color=""144, 136, 118"" Width=""8"" />
    </Appearance>
  </PlotArea>
</Chart>");
            return css.ToString();
        }
    }

In the marble skin, we see two params {image}  and {plotarea}. If we do not custom css, chart can show the background. However, I want to custom some its style, its background cannot show.

Please help.

Thanks / Phong Dang.

[Vladimir Milev]

Hello Phong,

Can you please share a small runnable sample with us illustrating the problem you have?

Best wishes,
Vladimir Milev
the Telerik team

[Phong]

Hi Vladimir

else //Custom CSS
                Skin skin = new Skin();   //my class is used for custom css
                skin.ChartTemplate = ChartTemplate.Marble;
                string xml = skin.GetCSS();

                XmlDocument doc = new XmlDocument();
                doc.LoadXml(xml);
                ChartSkin mySkin = new ChartSkin(doc);
                mySkin.ApplyTo(chart.Chart);

Please see the first post and two attached files and above code. You can see if you set Skin property in RadChart ( Skin : Marble), the graph will have the background (see Marble.png). Others, the graph does not have the background (see Custom-CSS.png).

Thanks / Phong Dang.

[Vladimir Milev]

Hi Phong,

Thanks for reporting this issue. Unfortunately, built-in image files are not supported with custom skins. We suggest that you provide a full server path to the background image you would like to show instead of  "{plotArea}".

All the best,
Vladimir Milev
the Telerik team