This is a migrated thread and some comments may be shown as answers.

Getting rid of blue select line in chrome

5 Answers 9 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Garrett
Top achievements
Rank 1
Garrett asked on 28 Jul 2014, 03:57 PM
Hi there,

I have a chart that has active areas set but when the page is rendered and the area is drawn with html, it has a blue outline where the area is. I tried the typical img border:none stylesheet trick but it does not work. Is there an attribute I can set or anything to make this line go away?

I have attached a screenshot of the chart I'm working with, the line is around the blue piece with the 15 over it.

5 Answers, 1 is accepted

Sort by
0
Garrett
Top achievements
Rank 1
answered on 28 Jul 2014, 03:57 PM
I forgot to say that in IE it appears the stylesheet thing works, but not chrome.
0
Danail Vasilev
Telerik team
answered on 29 Jul 2014, 08:28 AM
Hello Garrett,

Could you try to reproduce the mentioned issue with the code below and then tell us what changes you have made, so that I can make an investigation locally?
ASPX:
<telerik:RadChart ID="RadChart1" runat="server" Height="400px" Width="600px">
    <Series>
        <telerik:ChartSeries Type="Pie" Name="Series 1" Appearance-LegendDisplayMode="ItemLabels">
            <Items>
                <telerik:ChartSeriesItem YValue="18" Name="Item1">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="2" Name="Item2">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="1" Name="Item3">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="9" Name="Item4">
                </telerik:ChartSeriesItem>
            </Items>
        </telerik:ChartSeries>
    </Series>
    <PlotArea Appearance-FillStyle-MainColor="Transparent" Appearance-FillStyle-SecondColor="Transparent"></PlotArea>
</telerik:RadChart>



Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Garrett
Top achievements
Rank 1
answered on 29 Jul 2014, 02:34 PM
Hi Danail,

Basically my chart is very similar to yours but I have added this in the code behind:

protected void RadChart1_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)
    {
        e.SeriesItem.ActiveRegion.Attributes = "target=_blank";
        switch (e.SeriesItem.Index)
        {
            case 0: // receivables to generate
                {
                    e.SeriesItem.ActiveRegion.Tooltip = "Receivables to Generate";
                    e.SeriesItem.ActiveRegion.Url = "http://www.google.com/";
                    e.SeriesItem.ActiveRegion.Attributes = "onclick=\"window.open('http://www.google.com/', null); return false;\"";
                     
                    break;
                }
            case 1: // unsubmitted deals
                {
                    e.SeriesItem.ActiveRegion.Tooltip = "Unsubmitted Deals";
                    e.SeriesItem.ActiveRegion.Url = "http://www.google.com/";
                    e.SeriesItem.ActiveRegion.Attributes = string.Format("onclick=\"Open({0}); return false;\"", "'UnsubmittedDeals'");
                    break;
                }
            case 2: // unapproved deals
                {
                    e.SeriesItem.ActiveRegion.Tooltip = "Unapproved Deals";
                    e.SeriesItem.ActiveRegion.Url = "http://www.google.com/";
                    e.SeriesItem.ActiveRegion.Attributes = string.Format("onclick=\"Open({0}); return false;\"", "'UnapprovedDeals'");
                    break;
                }
            case 3: // unapproved payouts
                {
                    e.SeriesItem.ActiveRegion.Tooltip = "Unapproved Payouts";
                    e.SeriesItem.ActiveRegion.Url = "http://www.google.com/";
                    e.SeriesItem.ActiveRegion.Attributes = string.Format("onclick=\"Open({0}); return false;\"", "'UnapprovedPayouts'");
                    break;
                }
            default:
                break;
        }
    }


If you inspect the element it is clearly the HTML plot area that is drawn when the page is rendered:

<area shape="poly" href="XXXXXXXXXXXXX.aspx" coords="213,212,108,222,102,164,144,113,202,107,260,101,311,143,317,201,317,204,317,208,317,211" alt="Unapproved Payouts" title="Unapproved Payouts" onclick="Open('UnapprovedPayouts'); return false;">

Typically you can combat area shape outlines by using this css:

<style>a img {border:none; }</style>

but unfortunately this does not affect the grid for some reason.

So it's difficult to tackle because the line has nothing to do with the chart, but the chart is preventing the fix somehow.
0
Danail Vasilev
Telerik team
answered on 30 Jul 2014, 11:54 AM
Hi Garrett,

You must use the following style:
<style>
    img[usemap], map area {
        outline: none;
    }
</style>

More information is available here.

You can also fin the full runnable example on this regard in the attached archive.

Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Garrett
Top achievements
Rank 1
answered on 30 Jul 2014, 03:06 PM
Wonderful! Thank you! This works great.
Tags
Chart (Obsolete)
Asked by
Garrett
Top achievements
Rank 1
Answers by
Garrett
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or