Hi I am trying to get rounded corners on UltraChart, and used following code, but the border is not coming as expected, please see attached file.
Any help is greatly appreciated,
.aspx
<igchart:UltraChart id="auditQualityUC" runat="server" Width="780px" Height="500px">
<Border CornerRadius="15" DrawStyle="Solid" Raised="False" Color="Black" Thickness="1"></Border>
</igchart:UltraChart
.aspx.cs
this.auditQualityUC.ChartType = ChartType.Composite;
ChartArea area = new ChartArea();
this.auditQualityUC.CompositeChart.ChartAreas.Add(area);
AxisItem columnXAxis = new AxisItem(this.auditQualityUC, AxisNumber.X_Axis);
columnXAxis.DataType =
AxisDataType.String;
columnXAxis.SetLabelAxisType = Infragistics.UltraChart.Core.Layers.
SetLabelAxisType.GroupBySeries;
columnXAxis.Labels.ItemFormat =
AxisItemLabelFormat.ItemLabel;
columnXAxis.Labels.SeriesLabels.Format =
AxisSeriesLabelFormat.SeriesLabel;
columnXAxis.Extent = 30;
columnXAxis.LineThickness = 1;
area.Axes.Add(columnXAxis);
AxisItem lineXAxis = new AxisItem(this.auditQualityUC, AxisNumber.X_Axis);
lineXAxis.DataType =
lineXAxis.SetLabelAxisType = Infragistics.UltraChart.Core.Layers.
SetLabelAxisType.ContinuousData;
lineXAxis.Extent = 30;
lineXAxis.LineThickness = 1;
area.Axes.Add(lineXAxis);
AxisItem X2Axis = new AxisItem(this.auditQualityUC, AxisNumber.X2_Axis);
X2Axis.Extent = 70;
X2Axis.LineThickness = 1;
area.Axes.Add(X2Axis);
AxisItem columnYAxis = new AxisItem(this.auditQualityUC, AxisNumber.Y_Axis);
columnYAxis.DataType =
AxisDataType.Numeric;
columnYAxis.Labels.ItemFormat =
AxisItemLabelFormat.DataValue;
columnYAxis.RangeMin = 0;
columnYAxis.RangeMax = maxObservations;
columnYAxis.RangeType =
AxisRangeType.Custom;
columnYAxis.Extent = 50;
columnYAxis.LineThickness = 1;
area.Axes.Add(columnYAxis);
AxisItem lineYAxis = new AxisItem(this.auditQualityUC, AxisNumber.Y2_Axis);
lineYAxis.DataType =
lineYAxis.Labels.ItemFormat =
lineYAxis.RangeMin = 0;
lineYAxis.RangeMax = 100;
lineYAxis.Extent = 20;
lineYAxis.RangeType =
lineYAxis.LineThickness = 1;
area.Axes.Add(lineYAxis);
// Num Of Observations
();
element.ElementType =
.Gradient;
element.FillGradientStyle =
.VerticalBump;
element.Fill =
.FromArgb(152, 190, 126);
element.FillStopColor =
series1.Data.DataSource = auditReportDT;
series1.Data.ValueColumn =
;
series1.Data.LabelColumn =
series1.PEs.Add(element);
.auditQualityUC.CompositeChart.Series.Add(series1);
// Num Of Audited Observations
element2.ElementType =
element2.FillGradientStyle =
element2.Fill =
.FromArgb(243, 225, 38);
element2.FillStopColor =
series2.Data.DataSource = auditReportDT;
series2.Data.ValueColumn =
series2.Data.LabelColumn =
series2.PEs.Add(element2);
.auditQualityUC.CompositeChart.Series.Add(series2);
// % Quality
element3.ElementType =
element3.FillGradientStyle =
element3.Fill =
.FromArgb(39, 184, 246);
element3.FillStopColor =
series3.Data.DataSource = auditReportDT;
series3.Data.ValueColumn =
series3.Data.LabelColumn =
series3.PEs.Add(element3);
.auditQualityUC.CompositeChart.Series.Add(series3);
columnLayer.AxisX = columnXAxis;
columnLayer.AxisY = columnYAxis;
columnLayer.ChartArea = area;
columnLayer.ChartType =
.ColumnChart;
columnLayer.Series.Add(series1);
columnLayer.Series.Add(series2);
columnLayer.SwapRowsAndColumns =
.auditQualityUC.CompositeChart.ChartLayers.Add(columnLayer);
lineLayer.AxisX = lineXAxis;
lineLayer.AxisY = lineYAxis;
lineLayer.ChartArea = area;
lineLayer.ChartType =
.LineChart;
lineLayer.Series.Add(series3);
.auditQualityUC.CompositeChart.ChartLayers.Add(lineLayer);
app2.LineStyle.MidPointAnchors =
app2.Thickness = 3;
app2.IconAppearance.Icon =
.Square;
app2.IconAppearance.IconSize =
.Medium;
lineApp.LineAppearances.Add(app2);
//this.auditQualityUC.Border.Thickness = 0;
(obsrervationsByPersonUltraChart_FillSceneGraph);
>
The reason you're seeing an extra border around the chart is because of the composite chart area. You can either make the chart area borderless or set area.Border.CornerRadius=15;
Hi Max, your solution worked.
Actually it is getting two borders, one from ChartArea and another one from ultrachart itself.
So, i set two things,
1. ChartArea area = new ChartArea();
area.Border.Thickness = 0;
2. <igchart:UltraChart id="auditQualityUC" runat="server" Width="780px" Height="500px" EnableViewState="false">
</igchart:UltraChart>
Thanks a lot,
I appreciate your help so much.