RAD Html Chart Transparent Background Color

[Eric]

Hello,

I am trying to get the background/background color of the RAD HTML 5 Column Chart to be transparent but no matter what I do it is always white, unless, of course, I set it to some other color besides white (e.g. green).

I want to lay the chart on a larger background image but the charts plot background is always white.

How can  I make the chart transparent so I can see the background image underneath it?


<div style="padding:200px 0px 0px 0px;height:1000px;width:1000px;background-image:url(bearbackground.png);">
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800" Height="500" Transitions="true" BackColor="Transparent">
                <Appearance>
                    <FillStyle BackgroundColor="Transparent"></FillStyle>
                </Appearance>
                <Legend>
                    <Appearance Visible="false" ></Appearance>
                </Legend>
                <PlotArea>
                    <Appearance>
                        <FillStyle BackgroundColor="Transparent"></FillStyle>
                    </Appearance>
                    <XAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside"
                        Reversed="false">
                        <Items>
                            <telerik:AxisItem LabelText="Bear 1"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Bear 2"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Bear 3"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Bear 4"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Bear 5"></telerik:AxisItem>
                        </Items>
                        <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Visible="false"></LabelsAppearance>
                        <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                        <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                    </XAxis>
                    <YAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside"
                        MaxValue="50000" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
                        Step="10000" Visible="false">
                        <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                        <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                        <TitleAppearance Position="Center" RotationAngle="0" Text="Votes"></TitleAppearance>
                    </YAxis>
                    <Series>
                        <telerik:ColumnSeries Name="Bears" Stacked="false">
                            <Appearance>
                                <FillStyle BackgroundColor="#ff0000"></FillStyle>
                            </Appearance>
                            
                            <Items>
                                <telerik:SeriesItem YValue="25000"></telerik:SeriesItem>
                                <telerik:SeriesItem YValue="12000"></telerik:SeriesItem>
                                <telerik:SeriesItem YValue="39000"></telerik:SeriesItem>
                                <telerik:SeriesItem YValue="39000"></telerik:SeriesItem>
                                <telerik:SeriesItem YValue="39000"></telerik:SeriesItem>
                            </Items>
                        </telerik:ColumnSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>
</div>

Here is the source view of the generated javascript. It can be clearly seen that the background color is being set to white despite the fact that the configuration says Transparent:

WebForm_InitCallback();Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadHtmlChart, {"_chartArea":"{background: \u0027#ffffff\u0027}","_chartTitle":"{visible :true}","_plotArea":"{categoryAxis: { line: { width: 1, color: \u0027#b3b3b3\u0027}, minorTickType: \u0027outside\u0027,title :{visible :true},labels :{visible: false},minorGridLines :{visible :true, color: \u0027#f7f7f7\u0027},majorGridLines :{visible :true, color: \u0027#efefef\u0027}, axisCrossingValue: 0, categories: [\u0027Bear 1\u0027,\u0027Bear 2\u0027,\u0027Bear 3\u0027,\u0027Bear 4\u0027,\u0027Bear 5\u0027]},valueAxis:[{visible: false}],appearance: {background: \u0027#ffffff\u0027}}","_series":"series: [{color: \u0027#ff0000\u0027,name: \u0027Bears\u0027,tooltip :{visible :true},type: \u0027column\u0027, data: [25000,12000,39000,39000,39000],labels :{font: \u002712px Arial,Helvetica,sans-serif\u0027, visible :true, position: \u0027outsideEnd\u0027}}]","_uniqueId":"RadHtmlChart1","clientStateFieldID":"RadHtmlChart1_ClientState","height":"250px","skin":"Default","width":"800px"}, null, null, $get("RadHtmlChart1"));
});
//]]>

Thanks,
Eric

[Danail Vasilev]

Hello Eric,

In order to see the background image you should simply remove the BackgroundColor setting in the main Appearance tag of the RadHtmlChart as well as from the main Appearance tag of the PlotArea. For example:

    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800" Height="500" Transitions="true" BackColor="Transparent">
                <Appearance>
                </Appearance>
                <Legend>
                    <Appearance Visible="false" ></Appearance>
                </Legend>
                <PlotArea>
                    <Appearance>
                    </Appearance>
...

Regards,
Danail Vasilev
the Telerik team

[Eric]

Ok, that worked for the non zero grid lines.

Now, how do I get rid of the X and Y axis origin lines? That would be the lines that runs up at the zero point for the X axis and falls at the bottom of the columns for the Y axis.

[Danail Vasilev]

Hello Eric,

You can either set the visibility of the Major and Minor GridLines of the YAxis and XAxis to false as follow:

   <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800" Height="500" Transitions="true" BackColor="Transparent">
...
                <PlotArea>
...
                    <XAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside"
                        Reversed="false">
...
                        <MajorGridLines Color="#EFEFEF" Width="1" Visible="false"></MajorGridLines>
                        <MinorGridLines Color="#F7F7F7" Width="1" Visible="false"></MinorGridLines>
                    </XAxis>
                    <YAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside"
                        MaxValue="50000" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
                        Step="10000" Visible="false">
                        <MajorGridLines Color="#EFEFEF" Width="1" Visible="false"></MajorGridLines>
                        <MinorGridLines Color="#F7F7F7" Width="1" Visible="false"></MinorGridLines>
..
                    </YAxis>
                    <Series>
...
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>

Or set the width of the Major and Minor GridLines of the YAxis and XAxis to 0. For example:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800" Height="500" Transitions="true" BackColor="Transparent">
...
                <PlotArea>
...
                    <XAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside"
                        Reversed="false">
...
                        <MajorGridLines Color="#EFEFEF" Width="0" ></MajorGridLines>
                        <MinorGridLines Color="#F7F7F7" Width="0" ></MinorGridLines>
                    </XAxis>
                    <YAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside"
                        MaxValue="50000" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
                        Step="10000" Visible="false">
                        <MajorGridLines Color="#EFEFEF" Width="0" ></MajorGridLines>
                        <MinorGridLines Color="#F7F7F7" Width="0" ></MinorGridLines>
..
                    </YAxis>
                    <Series>
...
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>

Kind regards,
Danail Vasilev
the Telerik team

[Eric]

Neither one of those suggestions work. There is still a white line running up the side of the grid and the horizontal line is hidden because it is the same color as the background.

I have attached a screen shot for you to view and here is my code:

 

<

 

 

html xmlns="http://www.w3.org/1999/xhtml">

 

<

 

 

head id="Head1" runat="server">

 

 

 

 

 

 

 

<title></title>

 

 

 

 

 

 

 

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

 

 

 

 

 

 

 

<script type="text/javascript">

 

 

 

 

 

 

 

 

</script>

 

</

 

 

head>

 

<

 

 

body>

 

 

 

 

 

 

 

<form id="form1" runat="server">

 

 

 

 

 

 

 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

 

 

 

 

 

 

 

<Scripts>

 

 

 

 

 

 

 

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

 

 

 

 

 

 

 

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

 

 

 

 

 

 

 

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

 

 

 

 

 

 

 

</Scripts>

 

 

 

 

 

 

 

</telerik:RadScriptManager>

 

 

 

 

 

 

 

<script type="text/javascript">

 

 

 

 

 

 

 

//Put your JavaScript code here.

 

 

 

 

 

</

 

 

script>

 

 

 

 

 

 

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

 

 

 

 

 

 

 

</telerik:RadAjaxManager>

 

 

 

 

 

 

 

<center>

 

 

 

 

 

 

 

<div style="padding:250px 0px 0px 0px;height:500px;width:800px;background-image:url(bearbackground.png);background-repeat:no-repeat">

 

 

 

 

 

 

 

<table style="width:800px;padding:0px;border:0px;">

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td style="text-align:center;width:20%;vertical-align:bottom;">

 

 

 

 

 

 

 

<img src="bear1.png" style="height:80%;width:80%"/></td>

 

 

 

 

 

 

 

<td style="text-align:center;width:20%;vertical-align:bottom;">

 

 

 

 

 

 

 

<img src="bear2.png" style="height:60%;width:60%" /></td>

 

 

 

 

 

 

 

<td style="text-align:center;width:20%;vertical-align:bottom;">

 

 

 

 

 

 

 

<img src="bear3.png" style="height:60%;width:60%"/></td>

 

 

 

 

 

 

 

<td style="text-align:center;width:20%;vertical-align:bottom;">

 

 

 

 

 

 

 

<img src="bear4.png" style="height:60%;width:60%" /></td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

</table>

 

 

 

 

 

 

 

<div style="border:5px solid #dddd00;text-align:center;border-radius:8px;width:600px;background-image:url(bearbackground2.png);background-repeat:no-repeat;">

 

 

 

 

 

 

 

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600" Height="250" Transitions="true" BackColor="Transparent" Skin="Default" BorderStyle="None">

 

 

 

 

 

 

 

<Appearance>

 

 

 

 

 

 

 

</Appearance>

 

 

 

 

 

 

 

<Legend>

 

 

 

 

 

 

 

<Appearance Visible="false" ></Appearance>

 

 

 

 

 

 

 

</Legend>

 

 

 

 

 

 

 

<PlotArea>

 

 

 

 

 

 

 

<Appearance>

 

 

 

 

 

 

 

</Appearance>

 

 

 

 

 

 

 

<XAxis Color="#003399" MajorTickType="None" MinorTickType="None"

 

 

 

 

 

 

 

Reversed="false" >

 

 

 

 

 

 

 

<MajorGridLines Width="0"></MajorGridLines>

 

 

 

 

 

 

 

<MinorGridLines Width="0"></MinorGridLines>

 

 

 

 

 

 

 

<LabelsAppearance DataFormatString="{0}" RotationAngle="0" Visible="false"></LabelsAppearance>

 

 

 

 

 

 

 

</XAxis>

 

 

 

 

 

 

 

<YAxis Color="Transparent" MajorTickType="None" MinorTickType="None">

 

 

 

 

 

 

 

<MajorGridLines Width="0"></MajorGridLines>

 

 

 

 

 

 

 

<MinorGridLines Width="0"></MinorGridLines>

 

 

 

 

 

 

 

<TitleAppearance Position="Center" RotationAngle="0" Text="Votes" Visible="false"></TitleAppearance>

 

 

 

 

 

 

 

<LabelsAppearance DataFormatString="{0}" RotationAngle="0" Visible="false"></LabelsAppearance>

 

 

 

 

 

 

 

</YAxis>

 

 

 

 

 

 

 

<Series>

 

 

 

 

 

 

 

<telerik:ColumnSeries Name="Bears" Stacked="false">

 

 

 

 

 

 

 

<LabelsAppearance DataFormatString="{0}" />

 

 

 

 

 

 

 

<Appearance>

 

 

 

 

 

 

 

<FillStyle BackgroundColor="#003399" />

 

 

 

 

 

 

 

</Appearance>

 

 

 

 

 

 

 

<Items>

 

 

 

 

 

 

 

<telerik:SeriesItem YValue="2500"></telerik:SeriesItem>

 

 

 

 

 

 

 

<telerik:SeriesItem YValue="1954"></telerik:SeriesItem>

 

 

 

 

 

 

 

<telerik:SeriesItem YValue="963"></telerik:SeriesItem>

 

 

 

 

 

 

 

<telerik:SeriesItem YValue="656"></telerik:SeriesItem>

 

 

 

 

 

 

 

</Items>

 

 

 

 

 

 

 

</telerik:ColumnSeries>

 

 

 

 

 

 

 

</Series>

 

 

 

 

 

 

 

</PlotArea>

 

 

 

 

 

 

 

</telerik:RadHtmlChart>

 

 

 

 

 

 

 

</div>

 

 

 

 

 

 

 

</div>

 

 

 

 

 

 

 

</center>

 

 

 

 

 

 

 

</form>

 

</

 

 

body>

 

</

 

 

html>

 

 

 

 

[Eric]

I figured it out, finally:

 

 

<XAxis Width="0" >

 

 

 

<MajorGridLines Width="0"></MajorGridLines>

 

 

 

<MinorGridLines Width="0"></MinorGridLines>

 

 

 

<LabelsAppearance DataFormatString="{0}" RotationAngle="0" Visible="false"></LabelsAppearance>

 

 

 

</XAxis>

 

 

 

<YAxis Width="0">

 

 

 

<MajorGridLines Width="0"></MajorGridLines>

 

 

 

<MinorGridLines Width="0"></MinorGridLines>

 

 

 

<TitleAppearance Position="Center" RotationAngle="0" Text="Votes" Visible="false"></TitleAppearance>

 

 

 

<LabelsAppearance DataFormatString="{0}" RotationAngle="0" Visible="false"></LabelsAppearance>

 

 

 

</YAxis>