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);
>
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.
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;