Getting rid of blue select line in chrome

[Garrett]

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.

[Garrett]

I forgot to say that in IE it appears the stylesheet thing works, but not chrome.

[Danail Vasilev]

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

 

 

[Garrett]

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.

[Danail Vasilev]

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

 

 

[Garrett]

Wonderful! Thank you! This works great.