Apr 24, 2020, 9:30 AM
[OPEN] [#1766] Problem transparent background chart
Hi,
I need the chart with the transparent background, reading on the forum I managed to do it.
But if I add a second chart identical to the first one, transparency does not work.
See my example.
Please help me.
Thank you.
Jimmy
I need the chart with the transparent background, reading on the forum I managed to do it.
But if I add a second chart identical to the first one, transparency does not work.
See my example.
Please help me.
Thank you.
Jimmy
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
List<object> data = new List<object>
{
new { Month = "Jan", Data1 = 20 },
new { Month = "Feb", Data1 = 20 },
new { Month = "Mar", Data1 = 19 },
new { Month = "Apr", Data1 = 18 },
new { Month = "May", Data1 = 18 },
new { Month = "Jun", Data1 = 17 },
new { Month = "Jul", Data1 = 16 },
new { Month = "Aug", Data1 = 16 },
new { Month = "Sep", Data1 = 16 },
new { Month = "Oct", Data1 = 16 },
new { Month = "Nov", Data1 = 15 },
new { Month = "Dec", Data1 = 15 }
};
this.Chart1.GetStore().DataSource = data;
this.CartesianChart1.GetStore().DataSource = data;
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Line Chart - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style type="text/css">
.legend-transparent .x-legend-container {
background-color: transparent !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel
ID="pnlSpaced"
runat="server"
Layout="HBox"
BodyPadding="5"
BodyStyle="background-color: red;"
>
<Defaults>
<ext:Parameter Name="margin" Value="0 5 0 0" Mode="Value" />
</Defaults>
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Top" />
</LayoutConfig>
<Items>
<ext:Panel
runat="server"
Width="650"
Height="550"
BodyStyle="background-color: transparent;">
<Items>
<ext:CartesianChart
ID="Chart1"
runat="server"
Width="650"
Height="550"
InsetPadding="40"
InnerPadding="0 40 0 40"
BodyStyle="background-color: transparent !important;">
<Background Fill="transparent" />
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Month" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<LegendDomConfig runat="server" Dock="Bottom" StyleSpec="background: transparent !important;" Cls="legend-transparent" Shadow="false">
</LegendDomConfig>
<Axes>
<ext:NumericAxis
Position="Left"
Fields="Data1"
Grid="false"
Minimum="0"
Maximum="24">
<Style StrokeStyle="white" />
<Label Color="white" />
<Renderer Handler="return layoutContext.renderer(label) + '%';" />
</ext:NumericAxis>
<ext:CategoryAxis
Position="Bottom"
Fields="Month"
Grid="true">
<Style StrokeStyle="white" />
<Label RotationDegrees="-45" Color="white" />
</ext:CategoryAxis>
</Axes>
<Series>
<ext:LineSeries XField="Month" YField="Data1" Title="pippo">
<StyleSpec>
<ext:Sprite LineWidth="4" />
</StyleSpec>
<HighlightConfig>
<ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
</HighlightConfig>
<Marker>
<ext:Sprite Radius="4" />
</Marker>
<Label Field="Data1" Display="Over" />
</ext:LineSeries>
</Series>
</ext:CartesianChart>
</Items>
</ext:Panel>
<ext:Panel
runat="server"
Width="650"
Height="550"
BodyStyle="background-color: transparent;">
<Items>
<ext:CartesianChart
ID="CartesianChart1"
runat="server"
Width="650"
Height="550"
InsetPadding="40"
InnerPadding="0 40 0 40"
BodyStyle="background-color: transparent !important;">
<Background Fill="transparent" />
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Month" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<LegendDomConfig runat="server" Dock="Bottom" StyleSpec="background: transparent !important;" Cls="legend-transparent" Shadow="false">
</LegendDomConfig>
<Axes>
<ext:NumericAxis
Position="Left"
Fields="Data1"
Grid="false"
Minimum="0"
Maximum="24">
<Renderer Handler="return layoutContext.renderer(label) + '%';" />
</ext:NumericAxis>
<ext:CategoryAxis
Position="Bottom"
Fields="Month"
Grid="true">
<Label RotationDegrees="-45" Color="white" />
</ext:CategoryAxis>
</Axes>
<Series>
<ext:LineSeries XField="Month" YField="Data1" Title="pippo">
<StyleSpec>
<ext:Sprite LineWidth="4" />
</StyleSpec>
<HighlightConfig>
<ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
</HighlightConfig>
<Marker>
<ext:Sprite Radius="4" />
</Marker>
<Label Field="Data1" Display="Over" />
</ext:LineSeries>
</Series>
</ext:CartesianChart>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</form>
</body>
</html>