How to remove the border of a chart?

Hello,

Is there any way to remove the border of a chart?

 

Best regards,

Zach_Shine

Zach, do you mean the internal axis strokes, or the border around the chart container?

He likely means the ugly black border that you insist on drawing around a chart. Same problem here – and the documentation quality does not really help.

Ever chart is in a nice (or: ugly) black border – which I also want to remove. Nice how there was no answer on that. So, how does one do that?

Hi, 

There are three css classes that are applied to the chart's container by default. These are:

ui-corner-all

ui-widget-content

ui-chart-container

The first two are well known classes provided by jQuery UI themeroller. If you were to apply a themeroller theme rather than the infragistics theme, then the components would look different depending on how those well known classes were defined for that theme. The ugly border, as you put it, comes from ui-corner-all. The easiest way to disable it is to override that border color in css:

.ui-chart-container
{
border: transparent;
}

Here is an example: 

http://jsfiddle.net/gmurray/SxBKq/

It is changing the border to be transparent in the ui-chart-container class, which is applied to the chart with higher priority than the themeroller classes.

Hope this helps!

-Graham

Hi Graham,
I'm having a look at igPieChart and I also wish to remove the border around the chart and its legend.

A brief explanation of my CSS architecture: my page uses bootstrap, as it is inside an ASP.NET MVC 4.5.1 project. I used themeroller to download Redmond theme and I added the dowloaded files to themes folder. Then, since charts are not covered by jQuery UI, I added an additional css that merges chart style settings from the two IG files: 'structure\modules\infragistics.ui.chart.css' and 'themes\infragistics\infragistics.theme.css'.

These are CSS files that I reference from my page:

<link href="@Url.Content("~/Content/themes/redmond/jquery-ui-1.10.4.custom.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/Content/themes/common/infragistics.ui.chart.css")" rel="stylesheet" type="text/css" />

To make the border disappear, I added this setting to 'infragistics.ui.chart.css' file:

.ui-widget-content {
  border:0px;
}

Simply setting '.ui-chart-container' as you suggested didn't work.
Am I doing something wrong with CSS files or around?

Thank you, bye. Maria