# LineSeries Point Shape

1. ##### Manoj
3 posts
Member since:
Jun 2015

Posted 22 Jun 2015 Link to this post

I have multiple LineSeries that are tied to a common DateTimeContinuousAxes for X and multiple LinearAxes for Y.

So each LineSeries is tied to the common DateTimeContinuousAxis .

Each LineSeries may have its own dedicated Linear Axis OR may share a linear axis with other series.

Its the series that share both x and y axes that are confusing to the user.

To make this visually clear to the user, I have set the color of these line series and the corresponding shared Y axis color to match, so that its obvious that series A, B and C share the same Y axis (say "VOLTS").

But now I have multiple series with the same color. So I need to have the points for each individual series have a different shape so you can easily discriminate between the series.

For example, Series A, B and C all share a common Y Axis, and all three are green in color, but Series A points are a Green Triangle, Series B is a Green Square and Series C is a Green Circle.

Seems pretty straight forward...right?

I know I can do this on the ScatterSeries, but I see no way to set the Point Shape for a Point in LineSeries. Some thing similar to the example below...

private void ApplyShapeToPoints(ElementShape shape)
{
ScatterSeries series = this.radDropDownListSeries.SelectedValue as ScatterSeries;

foreach (ScatterPointElement point in series.Children)
{
point.Shape = shape;
}
}

But I cant use a scatterseries because my data is time based....

Any ideas?

MG

2. ##### Dimitar
1790 posts

Posted 23 Jun 2015 Link to this post

Hello MG,

Thank you for writing.

You can set the shapes to the line series with the following code:
`LineSeries lineSeries = ``new ``LineSeries();`
`lineSeries.Shape = ``new RoundRectShape(0);`
`lineSeries.PointSize = `new `SizeF(20, 20);`
`lineSeries.DataPoints.Add(``new ``CategoricalDataPoint(20, ``"Jan"``));`
`lineSeries.DataPoints.Add(``new ``CategoricalDataPoint(22, ``"Apr"``));`
`lineSeries.DataPoints.Add(``new ``CategoricalDataPoint(12, ``"Jul"``));`
`lineSeries.DataPoints.Add(``new ``CategoricalDataPoint(19, ``"Oct"``));`
`this``.radChartView1.Series.Add(lineSeries);`

`LineSeries lineSeries2 = ``new ``LineSeries();`

`lineSeries2.Shape = ``new OfficeShape();`
`lineSeries2.PointSize = `new `SizeF(20, 20);`
`lineSeries2.DataPoints.Add(``new ``CategoricalDataPoint(18, ``"Jan"``));`
`lineSeries2.DataPoints.Add(``new ``CategoricalDataPoint(15, ``"Apr"``));`
`lineSeries2.DataPoints.Add(``new ``CategoricalDataPoint(17, ``"Jul"``));`
`lineSeries2.DataPoints.Add(``new ``CategoricalDataPoint(22, ``"Oct"``));`
`this``.radChartView1.Series.Add(lineSeries2);`

Regards,
Dimitar
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
3. ##### Manoj
3 posts
Member since:
Jun 2015

Posted 23 Jun 2015 in reply to Dimitar Link to this post

Thanks Dimitar. Just throwing out some results here..

EllipseShape renders, but as a circle. How do I customize its shape? Am I missing something really obvious about these canned shapes?

RoudRectShape renders fine

OfficeShape renders fine

TabOffice12Shape renders fine

TabIEShape renders fine

TabVsShape renders fine

DiamondShape. StarShape and HeartShape don't render and are not visible. Again, something trivial I have overlooked on how they are initialized?

Manoj

4. ##### Dimitar
1790 posts

Posted 24 Jun 2015 Link to this post

Hello Manoj,

Thank you for writing back.

For the ellipse you should just set the point size to a rectangle not a square:
`lineSeries.Shape = ``new ``EllipseShape();`
`lineSeries.PointSize = ``new ``SizeF(20, 50);`

We have a known issue with our other shapes. You can track the item for status changes and add your vote for it here.

To workaround this you can use custom shape classes:
`class ``MyDiamondShape : ElementShape`
`{`
`    ``public ``override ``GraphicsPath CreatePath(Rectangle bounds)`
`    ``{`
`        ``GraphicsPath path = ``new ``GraphicsPath();`
`        `
`        ``path.AddPolygon(``new ``PointF[]`
`        ``{`
`            ``new ``PointF(bounds.X + 0.5f * bounds.Width, bounds.Top),`
`            ``new ``PointF(bounds.Right, bounds.Y + 0.5f * bounds.Height),`
`            ``new ``PointF(bounds.X + 0.5f * bounds.Width, bounds.Bottom),`
`            ``new ``PointF(bounds.Left, bounds.Y + 0.5f * bounds.Height)`
`        ``});`
`    `
`        ``return ``path;`
`    ``}`
`}`

`class ``MyStarShape : ElementShape`
`{`
`    ``private ``int ``arms;`
`    ``private ``float ``innerRadiusRatio;`
`    `
`    ``public ``MyStarShape()`
`    ``{`
`        ``this``.arms = 8;`
`        ``this``.innerRadiusRatio = 0.2f;`
`    ``}`
`    `
`    ``/// <summary>`
`    ``/// Creates Star like shape. Overrides CreatePath method in the base class`
`    ``/// ElementShape.`
`    ``/// </summary>`
`    ``public ``override ``GraphicsPath CreatePath(Rectangle bounds)`
`    ``{`
`        ``GraphicsPath path = ``new ``GraphicsPath();`
`        `
`        ``double ``angle = Math.PI / arms;`
`        ``double ``offset = Math.PI / 2d;`
`        ``PointF center = ``new ``PointF(bounds.X + bounds.Width / 2f, bounds.Y + bounds.Height / 2f);`
`        ``PointF[] points = ``new ``PointF[arms * 2];`
`        `
`        ``for ``(``int ``i = 0; i < 2 * arms; i++)`
`        ``{`
`            ``float ``r = (i & 1) == 0 ? bounds.Width / 2f : bounds.Width / 2f * innerRadiusRatio;`
`            `
`            ``float ``currX = center.X + (``float``)Math.Cos(i * angle - offset) * r;`
`            ``float ``currY = center.Y + (``float``)Math.Sin(i * angle - offset) * r;`
`        `
`            ``points[i] = ``new ``PointF(currX, currY);`
`        ``}`
`        `
`        ``path.AddPolygon(points);`
`        ``return ``path;`
`    ``}`
`}`

`class ``MyHeartShape : ElementShape`
`{`
`    ``public ``override ``GraphicsPath CreatePath(Rectangle bounds)`
`    ``{`
`        ``GraphicsPath path = ``new ``GraphicsPath();`
`        `
`        ``path.AddArc(``new ``Rectangle(bounds.X, bounds.Y, bounds.Width / 2, bounds.Height / 2), 150, 210);`
`        ``path.AddArc(``new ``Rectangle(bounds.X + bounds.Width / 2, bounds.Y, bounds.Width / 2, bounds.Height / 2), 180, 210);`
`        ``path.AddLine(path.GetLastPoint(), ``new ``Point(bounds.X + bounds.Width / 2, bounds.Bottom));`
`        ``path.CloseFigure();`
`    `
`        ``return ``path;`
`    ``}`
`    `
`}`