This is a migrated thread and some comments may be shown as answers.

DataPoint Markers cut in half in ChartArea

11 Answers 108 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 05 Jan 2012, 04:24 PM
Hello,

I have a question regarding DataPoint Markers. I am currently using the 2011 Q3 release.

I have a fairly standard line chart where I am defining the Y Axis MinValue, MaxValue, and Step.

In the attached screenshot, the values are 0, 100, and 10 respectively. The yellow series in the screenshot demonstrates the problem the best, since it has Y Values of both 0 and 100 at different points. Unfortunately, I don't have much flexibility in changing these numbers. As you will see in the attached screenshot, markers that land at or near zero, or at or near 100 are simply chopped in half.

I have tried several things, including giving the ChartArea a margin, padding, etc. I have also tried to set the max to something like "102", but still my Markers are chopped in half, and doing the same with my min range (currently 0), like setting it to "-2", would cause the steps to be incorrect, like -2, 8, 18, etc.

Is there any way to correct this behavior in the chart so that the entire DataPoint Marker (in my case a cirle) renders? I actually thought that this would be a rather common question, but after spending some time searching the forums here, I wasn't able to come up with anything.

Thanks for your time,
Jon

11 Answers, 1 is accepted

Sort by
0
Rahul
Top achievements
Rank 2
answered on 06 Jan 2012, 05:33 AM
Hi Jon,
        
          Try setting some top margin for the chart area.

radChart.DefaultView.ChartArea.Margin = new Thickness(0, 10, 0, 0);
0
Jon
Top achievements
Rank 1
answered on 06 Jan 2012, 05:32 PM
Rahul,

Thank you for your input, but as I mentioned above, this is one of the things I've already tried:

"I have tried several things, including giving the ChartArea a margin, padding, etc."

I'd be open and appreciative for any other ideas though.

Thanks,
Jon
0
Rahul
Top achievements
Rank 2
answered on 06 Jan 2012, 08:20 PM
Hi Jon,

            Ohh My mistake. I didn't read your post properly.
However I'm having one idea. Try to apply style for line
and point marks to reduce the size of line and point marks.

Regards,
Rahul
0
Evgenia
Telerik team
answered on 10 Jan 2012, 09:17 AM
Hi,

You can extend the Axis Range to have your pointmarks fully visible . For the purpose - set the ExtendDirection property of the YAxis to Both to achieve this. Take a look at the following topic for more information.

Greetings,
Evgenia
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Jon
Top achievements
Rank 1
answered on 10 Jan 2012, 05:24 PM
Evgenia,

Per your recommendation, I have implemented the "AxisExtendDirection" solution (as well as reading the link you posted in your reply).

There are several problems with this, however. As I mentioned in my first post, I could achieve the same results by simply changing YAxisMin and YAxisMax to mimic the same behavior. The problem is that I need the Y Axis to start at exactly 0 and go to exactly 100, no higher and no lower. Per the attached screenshot (with AxisExtendDirection implemented), you will see that it actually extends the *values* on the Y Axis to -10 to 110 as opposed to just giving the chart area more room to draw the Markers at 0 to 100. More to the point, per the screenshot, you will see that my Y Axis represents a "Compliance Percentage". As such, -10% and 110% "Compliance" make no sense (you can't have a -10 or 110 "Compliance Percentage", and this is a sticking point for my client).

I need a solution that doesn't change the Y Axis values at all, but allows for the entire DataPoint Marker to be drawn.

Rahul's suggestion to style the marker to be smaller is a good suggestion, but the end result is that the Markers are oddly small and don't look right visually.

I'm simply looking for a way to draw the Markers within the specified range without having them cut off at all. This must be a rather common problem in my opinion. Is there no way to achieve the desired results? Although your charting component is among the best I've worked with, I've never seen this particular problem before. I've used ComponentArt and Visifire Silverlight charting components in the past, and neither one of them had problems rendering DataPoint Markers fully within the specified range.

Is there any way else to achieve this? It is quite important that I'm able to build this correctly per our client's feedback, and I'm thinking that there must be a way to do it.

Thanks again for all your help and I look forward to any other ideas you have.

Regards,
Jon
0
Evgenia
Telerik team
answered on 13 Jan 2012, 02:11 PM
Hi Jon,

Thanks for your detailed explanation. However there is no other way to achieve your requirement.
In our new control RadChartView we made this possible as there is a property RadCartesianChart.ClipToBounds that can be set to false and this way you will be able to avoid clipping of Chart Elements. You may learn more for our new Chart control from its documentation here. If it is suitable for your scenario - you may use it instead of RadChart.
For the difference between the two controls you may read this forum post.

Kind regards,
Evgenia
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Carlos
Top achievements
Rank 1
answered on 20 Dec 2017, 02:33 PM

Hello Evgenia,

With the latest version, is there any way to avoid the datapoint marker being cut in half? It looks like the centre of the pointer lines up with the real value but as mentioned in previous posts that doesn't look good in the limits of the charts. So, is it possible to lift it up for 0% or drag it down for 100% as in the attached example?

Thanks in advance for your help.

Carlos.

0
Martin Ivanov
Telerik team
answered on 21 Dec 2017, 08:28 AM
Hello Carlos,

Moving the data point's visual center from its value would lead to a wrong visualization in the point series example. To achieve your requirement you can use two techniques. The first one is to extend the range of the axis. You can leave a margin on top and bottom so that the points with the maximum values are not positioned on the last value of the axis. Or alternatively, you can set the ClipToPlotArea property of the point series to False. This way the ellipse won't be clipped.

Regards,
Martin Ivanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Carlos
Top achievements
Rank 1
answered on 21 Dec 2017, 11:06 AM

Hello Martin,

Thanks for your answer. We cannot consider the first option due to client's requirements. On the second one, we cannot find the ClipToPlotArea parameter in the Kendo libraries. Do you have any example using javascript/jquery? I'm attaching a piece of our JSON output for your reference

Thanks and regards,

Carlos

0
Martin Ivanov
Telerik team
answered on 21 Dec 2017, 12:00 PM
Hello Carlos,

The ClipToPlotArea property is available only in RadChartView for WPF. I would suggest you to check the Kendo Chart documentation and if you don't find the answer there, to post your question in the Kendo forums.

Regards,
Martin Ivanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Carlos
Top achievements
Rank 1
answered on 22 Dec 2017, 02:13 PM

Hello Martin,

Thanks for your answer. The link that you suggested made the trick to fix my issue using the panes attribute. Thanks a lot for your help!!

Regards,

Carlos

 

Tags
Chart
Asked by
Jon
Top achievements
Rank 1
Answers by
Rahul
Top achievements
Rank 2
Jon
Top achievements
Rank 1
Evgenia
Telerik team
Carlos
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or