Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Chart > How to remove unwanted White Spaces in the Chart Area

• Achuthan

  Posted on Feb 6, 2012 (permalink)

  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  

  Attached files

  • Chart-UnnecessarySpace.png

  Reply

• Evgenia Evgenia

  Posted on Feb 8, 2012 (permalink)

  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

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Attached files

  • SampleChart-Modified.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Chart > How to remove unwanted White Spaces in the Chart Area