[Solved] How to remove unwanted White Spaces in the Chart Area

[Achuthan]

Hello,

I am using Telerik RadChart Silverlight control in sharepoint 2010 application page. Dynamically I am adding chart to the page. I have set the width of 300px and height of 280px for the chart. In the chart I have unnecessary spaces in the chart area,chart legend ,chart title.The data plotted in the chart area occupies less space but the legend , title , x-axis name and y - axis name occupies more space.Refer the attachment for the behaviour. Here is the code

private void setLegend()
{
telerikChart.DefaultSeriesDefinition.LegendDisplayMode = LegendDisplayMode.SeriesLabel;
telerikChart.DefaultView.ChartLegendPosition = Telerik.Windows.Controls.Dock.Top;
telerikChart.DefaultView.ChartLegend.UseAutoGeneratedItems = true;
telerikChart.DefaultView.ChartLegend.Margin = new Thickness(0);
telerikChart.DefaultView.ChartLegend.Padding = new Thickness(0);
telerikChart.DefaultView.ChartLegend.LegendItemMarkerShape = (MarkerShape)Enum.Parse(typeof(MarkerShape), getStyle("Legend Shape"), true);
}
private void AxisStyles()
{
telerikChart.DefaultView.ChartArea.AxisX.Title = getStyle("X Axis Name");
int stepX = (int)getDouble(getStyle("X Axis Label Step"));
if (stepX == 0)
stepX = 1;
if (getStyle("Make Inverse Axis") == "Yes")
{
telerikChart.DefaultView.ChartArea.AxisX.IsInverse = true;
telerikChart.DefaultView.ChartArea.AxisY.IsInverse = true;
}
telerikChart.DefaultView.ChartArea.LabelFormatBehavior = LabelFormatBehavior.None;
telerikChart.DefaultView.ChartArea.AxisX.Step = stepX;
telerikChart.DefaultView.ChartArea.AxisX.LabelStep = stepX;
telerikChart.DefaultView.ChartArea.AxisX.StepLabelLevelCount = stepX;
telerikChart.DefaultView.ChartArea.AxisX.StepLabelLevelHeight = stepX;
telerikChart.DefaultView.ChartArea.AxisX.LabelRotationAngle = getDouble(getStyle("X Axis Rotation Angle"));
int stepY = (int)getDouble(getStyle("Y Axis Label Step"));
if (stepY == 0)
    stepY = 1;
int multiplier = (int)getDouble(getStyle("Y Axis Tick Point Multiplier"));
if (multiplier > 0)
{
telerikChart.DefaultView.ChartArea.AxisY.MinorTickPointMultiplier = multiplier;
telerikChart.DefaultView.ChartArea.AxisY.MinorGridLinesVisibility = Visibility.Visible;
telerikChart.DefaultView.ChartArea.AxisY.MinorTicksVisibility = Visibility.Visible;
}
else
{
telerikChart.DefaultView.ChartArea.AxisY.MinorGridLinesVisibility = Visibility.Collapsed;
telerikChart.DefaultView.ChartArea.AxisY.MinorTicksVisibility = Visibility.Collapsed;
}
telerikChart.DefaultView.ChartArea.AxisY.Title = getStyle("Y Axis Name");
telerikChart.DefaultView.ChartArea.AxisY.LabelRotationAngle = getDouble(getStyle("Y Axis Rotation Angle"));
bool showLabels = getStyle("Show Labels on Chart Series") == "No" ? false : true;
telerikChart.DefaultView.ChartArea.SmartLabelsEnabled = false;
telerikChart.DefaultView.ChartArea.Margin = new Thickness(0);
telerikChart.DefaultView.ChartArea.Padding = new Thickness(0);
telerikChart.DefaultView.ChartArea.AxisX.AxisStyles.TitleStyle = this.Resources["CustomTitle"] as Style;
telerikChart.DefaultView.ChartArea.AxisX.AxisStyles.ItemLabelStyle = this.Resources["CustomLabel"] asStyle;
telerikChart.DefaultView.ChartArea.AxisX.AxisStyles.TickLineStyle = this.Resources["CustomTicks"] asStyle;
}

private void setChartTitle()
{
telerikChart.DefaultView.ChartTitle.HorizontalAlignment = HorizontalAlignment.Center;
telerikChart.DefaultView.ChartTitle.Content = getStyle("Chart Title");
FontFamily fName = new System.Windows.Media.FontFamily(getStyle("Chart Title Font Family"));
telerikChart.DefaultView.ChartTitle.FontFamily = fName;
telerikChart.DefaultView.ChartTitle.FontSize = getDouble(getStyle("Chart Title Font Size"));
string[] colorValues = getStyle("Chart Title Font Color").Split('[')[1].Split('=');
Color SelectedColor = Color.FromArgb(Convert.ToByte(colorValues[1].Split(',')[0]),Convert.ToByte(colorValues[2].Split(',')[0]), Convert.ToByte(colorValues[3].Split(',')[0]),Convert.ToByte(colorValues[4].Replace("]", "")));
telerikChart.DefaultView.ChartTitle.Foreground = new SolidColorBrush(SelectedColor);
}


private RadChart CreateChart_DefaultView()
{
telerikChart = new Telerik.Windows.Controls.RadChart();
telerikChart.DefaultView.ChartArea.NoDataString = "No data found to show chart control";
setLegend();
setChartTitle();
AxisStyles();

int itemCount = lstSeriesName.Count;
string strSeriesName = "";
for (int itemIndex = 0; itemIndex < itemCount; itemIndex++)
{
if (lstSeriesName[itemIndex] != "")
  strSeriesName = lstSeriesName[itemIndex];
if (addedSeries.ContainsKey(strSeriesName.ToLower()))
{
foreach (DataSeries seriesTemp in telerikChart.DefaultView.ChartArea.DataSeries)
{
addedSeries.Add(strSeriesName.ToLower(), strSeriesName);
DataSeries series = new DataSeries();
double high = getDouble(lstYAxis[itemIndex]);
double low = getDouble(lstXAxis[itemIndex]);
if (isRange)
  series.Add(new DataPoint() { High = high, Low = low });
else if (isStick)
  series.Add(new DataPoint() { High = high, Low = low, Open = low + 10, Close = low + 20 });
else
series.Add(new DataPoint() { YValue = high, XCategory = lstXAxis[itemIndex] });
series.Definition = getChart(chartType);
series.LegendLabel = strSeriesName;
series.Definition.SeriesName = strSeriesName.ToLower();
telerikChart.DefaultView.ChartArea.DataSeries.Add(series);
}
telerikChart.CreateItemStyleDelegate = BuildCustomItemStyle;
telerikChart.Margin = new Thickness(0);
telerikChart.Padding = new Thickness(0);
telerikChart.DefaultView.ChartArea.Extensions.Add(new CameraExtension());
string themeName = getStyle("Choose Theme");
if ((themeName != "[None]") && (themeName != ""))
StyleManager.SetTheme(telerikChart, (new ThemeConverter().ConvertFromString(getStyle("Choose Theme")) asTheme));
return telerikChart;
}
private void startDrawingChart()
{
string chartType = getStyle("Chart Type");
addedSeries = new Dictionary<string, string>();
RadChart chart = CreateChart_DefaultView();
chart.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Between;
if ((format != "[None]") || (getStyle("Show Filtering") == "Yes") || (getStyle("Show Datas") == "Yes"))
{
  chart.Margin = new Thickness(0, 40, 0, 0);
}
chart.Margin = new Thickness(0);
chart.Padding = new Thickness(0);
chart.DefaultView.ChartLegend.Margin = new Thickness(0);
chart.DefaultView.ChartLegend.Padding = new Thickness(0);
chart.DefaultView.ChartArea.Margin = new Thickness(0);
chart.DefaultView.ChartArea.Padding = new Thickness(0);
this.LayoutRoot.Children.Add(chart);
}

Refer the attachment(chart_unnecessaryspace.png) for the issueCould anyone provide a soultion for this issue and sample code for it as soon as possible.

Regards
Ramalingam S  

[Evgenia]

Hello Achutha,

Your questions was already answered in the support ticket (Ticket ID: 506403) started by you on the matter. I'll copy my response here for those who may struggle with the same:

 The way RadChart is populated with data doesn't reflect the style settings. That's why I prepared a sample where the Chart is bound via Automatic Series Mappings and applied the needed styles in code-behind so that all changes you require for the Chart Elements take effect.
Please try the styles in your project and let us know how it works.

All the best,
Evgenia
the Telerik team

[Madhukar]

Hi ,

I am not able to remove the white space from chart. I just wanted to show pie chart with numbers without any white space around it. I also wanted to show legend at the bottom of the chart. I am using it in the usrcontrol.ascx. And from .cs page calling this user control page. I am using Visual studio  3.5.

code of user control
ChartSeries chartSeries = new ChartSeries();
                        chartSeries.Name = "Active";
                        RadChart1.Series.Add(chartSeries);

                        chartSeries.Type = ChartType;
                        chartSeries.DataYColumn = dataYColumn;
                        chartSeriesDataXColumn = "Entity";
                        
                        


                        if (!String.IsNullOrEmpty(dataY2Column))
                            chartSeries.DataYColumn2 = dataY2Column;
                        if (!String.IsNullOrEmpty(dataY3Column))
                            chartSeries.DataYColumn3 = dataY3Column;

                        chartSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.ItemLabels;
                        chartSeries.Appearance.Border.Visible = true;

I also attached the chart image for your ready reference, Early reply will be really appreciable.

[Evgenia]

Hi Madhukar,

 You need to turn off the visibility of the Border for the PlotArea and Legend. Here's how you can achieve this:

RadChart1.PlotArea.Appearance.Border.Visible = false;
RadChart1.Legend.Appearance.Border.Visible = false;

 P.S. Please post your questions according to their corresponding product/technology. This forum post was created for RadChart for Silverlight.  

All the best,
Evgenia
the Telerik team