Charts not displaying correctly

2 posts, 0 answers
  1. Barry
    Barry avatar
    2 posts
    Member since:
    Jun 2011

    Posted 17 Mar 2015 Link to this post


    Telerik v2013 "UI for Winforms"
    .Net 3.5
    Visual Studio 2008

    We have a .Net desktop application built using Visual Studio with Telerik UI for WinForms integrated.  We are using the Chartview feature to show user some charts.  However they are not displaying correctly and we cannot identify why.

    We have set label mode to Top, it shows the label correctly for positive values but, it should display the bar lables at bottom side in case of negative values. We used radChartView control and belowbarSeries properties.

    barSeries.ShowLabels = true;
    barSeries.LabelMode = BarLabelModes.Top;

    Fig1 attached shows our current chart with the incorrect label positioning
    Fig2 attached shows how we would like the chart to display (a mockup).

    Please help to explain how we can achieve this in the chart?

  2. Hristo Merdjanov
    Hristo Merdjanov avatar
    670 posts

    Posted 19 Mar 2015 Link to this post

    Hi Barry,

    Thank you for writing.

    This type of functionality is not provided out of the box. However this can be easily achieved by subscribing to the LabelFormatting event and in the handler manually move the label downwards the labels of the bars having negative values. This can be achieved by setting a proper value to the BarLabelElement.PosittionOffset property, this can be calculated through the RadRect object contained in the LayoutSlot property. Please see my code snippet below:
    public partial class Form1 : Form
        public Form1()
            BarSeries barSeries = new BarSeries("Performance", "RepresentativeName");
            barSeries.Name = "Q1";
            barSeries.DataPoints.Add(new CategoricalDataPoint(-3, "Harley"));
            barSeries.DataPoints.Add(new CategoricalDataPoint(-2, "White"));
            barSeries.DataPoints.Add(new CategoricalDataPoint(-1, "Smith"));
            barSeries.DataPoints.Add(new CategoricalDataPoint(0, "Jones"));
            barSeries.DataPoints.Add(new CategoricalDataPoint(1, "Marshall"));
            barSeries.ShowLabels = true;
            barSeries.LabelMode = BarLabelModes.Top;
        private void radChartView1_LabelFormatting(object sender, ChartViewLabelFormattingEventArgs e)
            BarLabelElement barLabel = e.LabelElement as BarLabelElement;
            if (barLabel != null)
                int value = int.Parse(e.LabelElement.DataPoint.Label.ToString());
                if (value < 0 )
                    RadRect rect = e.LabelElement.DataPoint.LayoutSlot;
                    barLabel.PositionOffset = new PointF(0, (float)rect.Height + 30);

    I would like to note that this solution will work for the case you describe, if you decide to use this approach in another scenario you might need to slightly change it.

    I am also sending you screenshot of the result on my end.

    Hristo Merdjanov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft R3 2016 release webinar banner
Back to Top