RAD Html Chart Transparent Background Color

6 posts, 0 answers
  1. Eric
    Eric avatar
    5 posts
    Member since:
    Nov 2012

    Posted 14 Mar 2013 Link to this post

    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
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 19 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eric
    Eric avatar
    5 posts
    Member since:
    Nov 2012

    Posted 23 Mar 2013 Link to this post

    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.
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 26 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Eric
    Eric avatar
    5 posts
    Member since:
    Nov 2012

    Posted 29 Mar 2013 Link to this post

    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>

     

     

     

     

  7. Eric
    Eric avatar
    5 posts
    Member since:
    Nov 2012

    Posted 30 Mar 2013 Link to this post

    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>

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017