locked
remove / disappear border line in linechart RRS feed

  • Question

  • User944339287 posted

    hi guys, how can i remove / disappear border line of line chart?

    it's still appearing although i have set border color to white. please advise.

    Thursday, January 2, 2014 2:55 AM

Answers

  • User1734617369 posted

    Hi,

    You could use ordinary css to do that, like in this example:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication3.WebForm3" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            #LineChart1__ParentDiv {
                border-color: white;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <div>
            <asp:LineChart ID="LineChart1" runat="server" 
    ChartWidth="450" ChartHeight="300" ChartType="Basic"
    ChartTitle="United States versus European Widget Production" 
    CategoriesAxis="2007,2008,2009,2010,2011,2012" 
    ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9" 
    ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">            
    <Series>
        <asp:LineChartSeries Name="United States" 
        LineColor="#6C1E83" Data="110, 189, 255, 95, 107, 140" />
        <asp:LineChartSeries Name="Europe"  
        LineColor="#D08AD9" Data="49, 77, 95, 68, 70, 79" />
    </Series>
    </asp:LineChart>
        </div>
        </form>
    </body>
    </html>
    

    Best regards
    Johan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 2, 2014 4:24 AM
  • User1734617369 posted

    Hi,

    Ok, in your case the ID of the div that you want to change should be cph_body_LineChart1__ParentDiv and thus the style should be something like:

    <style>
            #cph_body_LineChart1__ParentDiv {
                border-color: white;
            }
    </style>

    or if you would like to keep it a bit more generic you could set the LineChart to the following:

    <asp:LineChart ID="LineChart1" runat="server" CssClass="NoBorder" ChartHeight="300" ChartWidth="450"></asp:LineChart>

    and te style to:

    div.NoBorder div:first-child {
                border-color: white;
            }

    /Johan


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 3, 2014 12:36 PM

All replies

  • User1734617369 posted

    Hi,

    You could use ordinary css to do that, like in this example:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication3.WebForm3" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            #LineChart1__ParentDiv {
                border-color: white;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <div>
            <asp:LineChart ID="LineChart1" runat="server" 
    ChartWidth="450" ChartHeight="300" ChartType="Basic"
    ChartTitle="United States versus European Widget Production" 
    CategoriesAxis="2007,2008,2009,2010,2011,2012" 
    ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9" 
    ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">            
    <Series>
        <asp:LineChartSeries Name="United States" 
        LineColor="#6C1E83" Data="110, 189, 255, 95, 107, 140" />
        <asp:LineChartSeries Name="Europe"  
        LineColor="#D08AD9" Data="49, 77, 95, 68, 70, 79" />
    </Series>
    </asp:LineChart>
        </div>
        </form>
    </body>
    </html>
    

    Best regards
    Johan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 2, 2014 4:24 AM
  • User944339287 posted

    Hi,

    I tried but not work for me. The border line still appear. Please advise. TQ

    Thursday, January 2, 2014 5:05 AM
  • User1734617369 posted

    Hi,

    Could you provide the code that you are using or is it the same example that I used?

    /Johan

    Thursday, January 2, 2014 5:55 AM
  • User944339287 posted

    Hi, thanks for your time to look into my problem.

    Master Page

    <%@ Master Language="VB" CodeFile="test.master.vb" Inherits="controller_test" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="cph_head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ContentPlaceHolder id="cph_body" runat="server"></asp:ContentPlaceHolder>
        </form>
    </body>
    </html>

    Content Page

    <%@ Page Title="" Language="VB" MasterPageFile="~/controller/test.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="controller_Default" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="cph_head" Runat="Server">
        <style>
            #LineChart1__ParentDiv {
                border-color: white;
            }
        </style>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="cph_body" Runat="Server">
        <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></cc1:ToolkitScriptManager>
        <div>
           <cc1:LineChart ID="LineChart1" runat="server" ChartHeight="300" ChartWidth="450"></cc1:LineChart>
        </div>
    </asp:Content>

    Friday, January 3, 2014 3:48 AM
  • User1734617369 posted

    Hi,

    Ok, in your case the ID of the div that you want to change should be cph_body_LineChart1__ParentDiv and thus the style should be something like:

    <style>
            #cph_body_LineChart1__ParentDiv {
                border-color: white;
            }
    </style>

    or if you would like to keep it a bit more generic you could set the LineChart to the following:

    <asp:LineChart ID="LineChart1" runat="server" CssClass="NoBorder" ChartHeight="300" ChartWidth="450"></asp:LineChart>

    and te style to:

    div.NoBorder div:first-child {
                border-color: white;
            }

    /Johan


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 3, 2014 12:36 PM