Thursday, September 5, 2013

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

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:

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):

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)?

No comments:

Post a Comment