# LineSeries Point Shape

ChartView
Top achievements
Rank 1
Manoj asked on 22 Jun 2015, 07:29 PM

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

## 3 Answers, 1 is accepted

0
Dimitar
Telerik team
answered on 23 Jun 2015, 11:23 AM
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
0
Manoj
Top achievements
Rank 1
answered on 23 Jun 2015, 10:02 PM

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

0
Dimitar
Telerik team
answered on 24 Jun 2015, 01:49 PM
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;`
`    ``}`
`    `
`}`

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
Tags
ChartView