DataPoint Markers cut in half in ChartArea

[Jon]

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

[Rahul]

Hi Jon,
        
          Try setting some top margin for the chart area.

radChart.DefaultView.ChartArea.Margin = new Thickness(0, 10, 0, 0);

[Jon]

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

[Rahul]

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

[Evgenia]

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

[Jon]

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

[Evgenia]

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

[Carlos]

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.

[Martin Ivanov]

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

[Carlos]

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

[Martin Ivanov]

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

[Carlos]

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