[CLOSED] How to change ToolTip background color ,font zize for line chart

  1. #1

    [CLOSED] How to change ToolTip background color ,font zize for line chart

    HI


    We are using ext.net line chart, can you please tell me how to change the font size ,background color in tooltip for line chart

    Please find the code

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="Ext.Net" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server"> 
     
    
        protected void Page_Load(object sender, EventArgs e)
        {
    
            if (!X.IsAjaxRequest)
            { 
                try
                {
                    DataTable dtSpiCpi = new DataTable();
                    dtSpiCpi.Locale = System.Globalization.CultureInfo.InvariantCulture;
                    dtSpiCpi.Columns.Add("DateName", typeof(string));
                    dtSpiCpi.Columns.Add("Column1", typeof(decimal));
                    dtSpiCpi.Columns.Add("Column2", typeof(decimal));
                    dtSpiCpi.Columns.Add("Column3", typeof(decimal));
                    dtSpiCpi.Columns.Add("Column4", typeof(decimal));
    
                    DataRow objRow = null;
    
                    for (int index = 1; index <= 12; index++)
                    {
                        objRow = dtSpiCpi.NewRow();
                        objRow["DateName"] = index + "Jan15";
    
                        if (index < 3)
                        {
                            objRow["Column1"] = Convert.ToDecimal("4.00");
                            objRow["Column3"] = Convert.ToDecimal("3.00");
                            objRow["Column4"] = Convert.ToDecimal("2.00");
                            objRow["Column2"] = Convert.ToDecimal("1.0");
                        }
                        else if (index < 5)
                        {
                            objRow["Column1"] = Convert.ToDecimal("1.0");
                            objRow["Column2"] = Convert.ToDecimal("2.0");
                            objRow["Column3"] = Convert.ToDecimal("3.0");
                            objRow["Column4"] = Convert.ToDecimal("4.0");
                        }
                        else if (index < 7)
                        {
                            objRow["Column1"] = Convert.ToDecimal("2.0");
                            objRow["Column2"] = Convert.ToDecimal("3.0");
                            objRow["Column3"] = Convert.ToDecimal("2.0");
                            objRow["Column4"] = Convert.ToDecimal("3.0");
    
                        }
                        else
                        {
                            objRow["Column1"] = Convert.ToDecimal("4.0");
                            objRow["Column2"] = Convert.ToDecimal("3.0");
                            objRow["Column3"] = Convert.ToDecimal("2.0");
                            objRow["Column4"] = Convert.ToDecimal("1.0");
    
                        }
                        dtSpiCpi.Rows.Add(objRow);
                    }
    
                    storeSpiCpi.RemoveAll();
                    storeSpiCpi.DataSource = dtSpiCpi;
                    storeSpiCpi.DataBind();
    
    
                }
                catch (System.Data.SqlClient.SqlException ex)
                {
                    string strin = ex.ToString();
                }
            }
    
    
        }
    </script>
    
    <!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 id="Head1" runat="server">
        <title>Submit MultiSelect Values - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .x-ie8m .my-marker {
                cursor: pointer;
            }
        </style>
        <ext:XScript ID="XScript1" runat="server">
    
            <script type="text/javascript">  
        </script>
            
            
    
        </ext:XScript>
        <script type="text/javascript" language="javascript">
    
    
             
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
            <table border="1">
                <tr> 
                    <td>
                        <ext:Panel ID="PanelYtd" runat="server" Width="1000" Height="500" Layout="FitLayout">
                            <Items>
                                <ext:Chart ID="chartSpiCpi" runat="server" Shadow="true" StandardTheme="Blue"
                                    Animate="true" Width="850" Height="425">
                                    <Store>
                                        <ext:Store ID="storeSpiCpi" runat="server">
                                            <Model>
                                                <ext:Model ID="Model16" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="DateName" Type="String" />
                                                        <ext:ModelField Name="Column1"> 
                                                        </ext:ModelField>
                                                        <ext:ModelField Name="Column2"> 
                                                        </ext:ModelField>
                                                        <ext:ModelField Name="Column3"> 
                                                        </ext:ModelField>
                                                        <ext:ModelField Name="Column4"> 
                                                        </ext:ModelField>
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <Axes>
                                        <ext:NumericAxis Position="Left" Fields="Column1,Column2,Column3,Column4" Title="Y"   Grid="true" AdjustEnd="true">
                                            <LabelTitle Font="normal 11px Arial;" Fill="Black" />
                                            <Label Font="normal 11px Arial;" Fill="Black" />
                                            <GridConfig>
                                                <Odd Stroke="#000000" />
                                                <Even Stroke="#000000" />
                                            </GridConfig>
                                        </ext:NumericAxis>
                                        <ext:CategoryAxis Position="Bottom" Fields="DateName" Title="x">
                                            <Label Font="normal 11px Arial;" Fill="Black" />
                                        </ext:CategoryAxis>
                                    </Axes>
                                    <LegendConfig Position="Bottom" BoxStroke="false" BoxStrokeWidth="2" Padding="2" LabelFont="normal 11px Arial;">
                                    </LegendConfig>
    
                                    <Series>
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column1" Title="Column1" Smooth="10">
                                            <Tips ID="Tips2" runat="server" TrackMouse="true" Width="330">
                                                 <Renderer Handler="this.setTitle('Column 1: ' + item.value[1] + ' (Click here to see drill down report)');" />  
                                                                                                
                                            </Tips>
                                            <MarkerConfig Fill="#6A8829" Stroke="#6A8829" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#6A8829" StrokeWidth="2" />                                       
                                            <Label Font="normal 11px Arial;" />
                                        </ext:LineSeries>
    
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column2" Title="Column2" Smooth="10">
                                            <Tips ID="Tips3" runat="server" TrackMouse="true" Width="330">
                                                 <Renderer Handler="this.setTitle('Column 2: ' + item.value[1] + ' (Click here to see drill down report)');" />  
                                            </Tips>
                                            <MarkerConfig Fill="#E15E00" Stroke="#E15E00" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#E15E00" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" />
                                        </ext:LineSeries>
    
    
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column3" Title="Column3" Smooth="10">
                                            <Tips ID="Tips4" runat="server" TrackMouse="true" Width="330">
                                                 <Renderer Handler="this.setTitle('Column 3: ' + item.value[1] + ' (Click here to see drill down report)');" />  
                                            </Tips>
                                            <MarkerConfig Fill="#1E7A93" Stroke="#1E7A93" Type="Diamond" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#1E7A93" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" />
                                        </ext:LineSeries>
    
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column4" Title="Column4" Smooth="10">
                                            <Tips ID="Tips5" runat="server" TrackMouse="true" Width="330">
                                                 <Renderer Handler="this.setTitle('Column 4: ' + item.value[1] + ' (Click here to see drill down report)');" />  
                                            </Tips>
                                            <MarkerConfig Fill="#50386E" Stroke="#50386E" Type="Diamond" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#50386E" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" />
                                        </ext:LineSeries>
                                    </Series>
                                </ext:Chart>
                            </Items>
                        </ext:Panel>
    
                    </td>
                </tr>
            </table>
    
        </form>
    </body>
    </html>
    REgards
    PRaveen
    Last edited by Daniil; Aug 26, 2015 at 6:12 AM. Reason: [CLOSED]
  2. #2
    Hi @praveencat123,

    Please define <Tips ... Cls="my-tip"> and put this CSS definition in the page's <head>.
    <style>
        .my-tip .x-tip-header-text-container {
            font-size: 20px;
        }
    
        .my-tip {
            background-color: yellow;
        }
    </style>
  3. #3
    Thank you very much , issue is resolved but this below line was not working


    .my-tip {
            background-color: yellow;
        }
    Any how i have managed with below CSS

    .my-tip .x-tip-header-text-container {
            font-size: 8.5px;
            background-color: yellow;
        }
    Last edited by Daniil; Aug 26, 2015 at 6:12 AM. Reason: Please use [CODE] tags

Similar Threads

  1. [CLOSED] Change Color Window's Header Background Color
    By rguardado in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 16, 2015, 3:48 PM
  2. [CLOSED] How to set font of X & Y axis in Line Chart
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 19, 2013, 6:44 AM
  3. [CLOSED] How to change background color of labels in chart
    By livehealthierGF in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 16, 2013, 4:27 AM
  4. [CLOSED] Change TreePanel background color and toolbar color
    By jchau in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 07, 2012, 4:42 PM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 3:55 PM

Tags for this Thread

Posting Permissions