CODEWITHSUNDEEP
asp.netc#-4.0webformsmschart
kbrimington
kbrimington

Reputation: 25642

How to use transparency with System.Web.UI.DataVisualization.Chart

I am designing a simple chart for a report on an ASP.NET 4.0 web form. I face a problem in that the chart appears to mangle the fonts if I use any amount of transparency. Consider the example below:

<asp:Chart
  ID="chart" runat="server"
  Height="300px" Width="300px"
  BackColor="White"
  ImageStorageMode="UseHttpHandler">
  <Titles>
    <asp:Title Name="title" Text="Results" />
  </Titles>
  <Legends>
    <asp:Legend
      Name="Default"
      Docking="Top"
      LegendStyle="Column"
      BackColor="Transparent"
      Title="Legend"
      Font="Segoe UI, 10.25pt, style=Regular"
      TitleFont="Segoe UI, 12pt, style=Regular">
    </asp:Legend>
  </Legends>
  <Series>
    <asp:Series
      Name="Default"
      ChartType="Pie"
      CustomProperties="PieDrawingStyle=Concave,PieLabelStyle=Disabled"
      IsValueShownAsLabel="False">
      <Points>
        <asp:DataPoint Label="Argentina" YValues="5" />
        <asp:DataPoint Label="Italy" YValues="8" />
        <asp:DataPoint Label="Portugal" YValues="12" />
        <asp:DataPoint Label="China" YValues="45" />
        <asp:DataPoint Label="United States" YValues="32" />
      </Points>
    </asp:Series>
  </Series>
  <ChartAreas>
    <asp:ChartArea Name="area" BackColor="Transparent" />
  </ChartAreas>
</asp:Chart>

For the sake of demonstration, I hard-coded the data points in this example. No code-behind is required. My application has the properly-configured appSettings and system.webServer/modules entries. Note that the font style for the legend has been set, explicitly, to Regular.

This produces the following chart:

Chart with White Background

Ok. Now for the problem. We require the chart to sit on top of an HTML region with a gradient background. In order to avoid interrupting the gradient, I want the background regions of the chart to be transparent. If I change line four from BackColor="White" to BackColor="Transparent", all of my fonts become bolded and lose their antialiasing. See below (with the chart positioned in a gray div):

Chart with Transparent Background

Is this a limitation of the charting control? Can I make a chart with a transparent background and still have graceful-looking fonts, or should I consider other options (e.g., explore other charting frameworks or revise the requirements)?

Upvotes: 2

Views: 863

Answers (1)

mit
mit

Reputation: 1831

Set AntiAliasing property to Graphics and check it. I have tried out my curve graph and its working.

<asp:Chart
  ID="chart" 
  runat="server"
  Height="300px" 
  Width="300px"
  BackColor="Transparent"
  ImageStorageMode="UseHttpHandler" 
  AntiAliasing="Graphics">

Upvotes: 2

Related Questions