How to remove unwanted White Spaces in the Chart Area

4 posts, 0 answers
  1. Achuthan
    Achuthan avatar
    31 posts
    Member since:
    May 2007

    Posted 06 Feb 2012 Link to this post


    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;
    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";
    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 });
    series.Add(new DataPoint() { YValue = high, XCategory = lstXAxis[itemIndex] });
    series.Definition = getChart(chartType);
    series.LegendLabel = strSeriesName;
    series.Definition.SeriesName = strSeriesName.ToLower();
    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);

    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.

    Ramalingam S  
  2. Evgenia
    Evgenia avatar
    1437 posts

    Posted 08 Feb 2012 Link to this post

    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,
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. Madhukar
    Madhukar avatar
    1 posts
    Member since:
    Jul 2012

    Posted 25 Jul 2012 Link to this post

    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";

                            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.

  4. Evgenia
    Evgenia avatar
    1437 posts

    Posted 27 Jul 2012 Link to this post

    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,
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top