How to remove alt style from chart component in c#.net? - asp.net

Question

I have a stacked chart component (from the MS Chart Control Library) on a c#.net webform which I created by dragging the control onto the design surface. I then edited the source html (.aspx page) to give the element a css class and remove the style attribute that was there originally. This was so that I could control the style from the css file instead of using embedded styling. Here is the html:
<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1" CssClass="smallBarChart"
IsMapAreaAttributesEncoded="True">
In the site.css file, I have specified the following:
.smallBarChart
{
width: 350px;
height: 230px;
}
When I run the web-app, the html that is rendered for the chart component has an "alt style" attribute added in. Even though it has the correct class attribute it is using the information contained in the "style" attribute. Why is this "style" attribute being generated by .net??. I have taken all style attribute info out of the original aspx file.
I don't have any instructions to change the style in my code behind (.cs) file
<img id="Chart1" class="smallBarChart" src="/Charts/ChartImg.axd?i=chart_2c39400223fb4933bf5a99e05d6119d4_3.png&g=b5c73578558442d3b9e1dd54cc127f20" alt="" style="height:300px;width:300px;border-width:0px;">
I should emphasise that I need to control the style of the chart component from my site.css file so any suggestions around using inline styling are not an option for me. Inline styling (adding a style attribute to a html element) is bad practice in any case!!!

Answer 1

I don't know why ASP.NET is overriding your work, but try this in your CSS:
.smallBarChart
{
width: 350px !important;
height: 230px !important;
}
Good Luck!

Answer 2

Set your chart's dimensions (Width/Height) at design time:
<asp:Chart Height="Unit" Width="Unit" ID="Chart1" runat="server" DataSourceID="SqlDataSource1" CssClass="smallBarChart" IsMapAreaAttributesEncoded="True">

Answer 3

Im beginning to think the answer to this is that because the .net runtime generates the html necessary to build the chart at runtime and because it transforms "Chart1" from an element into an element so that the browser can understand it, it will insert its own style attributes at runtime (even if I remove this in the .aspx file, the properties window shows 300px x 300px by default).
This being the case, it seems pointless assign a cssClass to the control since any matched CSS rule will be overridden by the inline style that .net gives the element when the HTML is served up (which is always 300 x 300px in my case for some reason.
In other words, I can not specify the width and height of an asp.net control in a separate css file because asp.net will ALWAYS give it its own style attribute at runtime.
The reason I posted this question is that I want to define the size of what I call a "Small Bar Chart" in the web site's CSS file so that if I have 10, 15 or 20 of these small barcharts on a page, I can resize them all. I guess the way to do this in .net is to create a custom control that is the right size since it wont let you control its style from a CSS file.

Answer 4

I encountered a similar problem using .net chart control and Zurb foundation, and we want our image to scale in a responsive layout. Zurb does a great job of that but really needs no width or height set on the image.
Unfortunately with the width and height are set on the image tag via the style attribute. We found that scaling was only performed on the width of our charts but the height remained the same. So, without proportional scaling our charts could look a little squashed.
Our solution is to subclass the chart control, override the render method, get the base class to render html and then modify the html to remove styles. Doing this allowed the charts to scale themselves proportional to their container.
Here is our solution:
public class ChartWithNoDimensionsSpecified : Chart
{
//we override this because the child chart controls may throw an exception and we don't want that to take down our whole page!
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
try
{
//get the base control to render itself into our stringwriter
System.IO.StringWriter stringWriter = new System.IO.StringWriter();
System.Web.UI.HtmlTextWriter chartWriter = new System.Web.UI.HtmlTextWriter(stringWriter);
base.Render(chartWriter);
//get the html rendered and find the start and end of the style tag
//note we assume no spaces between the style attribute = and "
//we also assume the img tag is first and there are no tags before it with a style
string html = stringWriter.ToString();
int pos = html.IndexOf("style=\"",StringComparison.OrdinalIgnoreCase);
if (pos != -1)
{
int pos2 = html.IndexOf("\"", pos + 8);
//we only want this one style to be set in the tag itself.
string replaceStyleAttr = "border:0px;";
//write the image tag, excluding the existing styles but replaced with our own...
writer.Write(html.Substring(0, pos + 7) + replaceStyleAttr + html.Substring(pos2));
}
else //incase we could not find the style tag...
{
//write out the existing standard html. We could alternatively throw an error here.
writer.Write(html);
}
}
catch (Exception ex)
{
//if there is an error, write this output instead
writer.Write("<div title=\"The chart control could not be rendered. This may be related to configuration, permissions or IIS being confused about access to the temp chart images folder (exception: " + HttpUtility.HtmlAttributeEncode(ex.Message) + "). If the charts have otherwise worked ok, recycle the IIS app pool and stop/start the site\"><span style=\"color:#ff0000;\">Error</span> (hover for detail)</div>");
}
}
}
In our case the charts are generated grammatically in c# code, and so we don't use the asp.net designer. If you do, you may need to make some changes to this to use that in the designer.