Custom Scatter Area Series

[Amige]

Hi,

I'd like to know if it is possible to create a custom ScatterAreaSeries like the one shown in the attached image.

I'd like to indicate some point and only the area between the line and that point to be colored.

Thanks,

Alberto

[Martin Ivanov]

Hello Amige,

You can use the OriginValue property of the series.

<telerik:ScatterAreaSeries OriginValue="3" />

I hope this works for you.

Regards,
Martin
Telerik

[Amige]

Hello Martin,

Unfortunately I am using the Telerik.Windows.Controls.Chart dll 2014.1.331.40 version, I read that property is available on the 2016.1.215.40 version.

Is there another way to accomplish that?

Regards,

Alberto

[Martin Ivanov]

Hi Alberto,

Yes, the property is available since Q1 2016. Before that it was possible to achieve such visualization with area series by using the RangeSeries of the chart. Here is an example in code:

<telerik:RadCartesianChart >
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RangeSeries>
        <telerik:RangeSeries.DataPoints>
            <telerik:RangeDataPoint Category="1" Low="3" High="3" />
            <telerik:RangeDataPoint Category="2" Low="3" High="5" />
            <telerik:RangeDataPoint Category="3" Low="3" High="3" />
            <telerik:RangeDataPoint Category="4" Low="3" High="10" />
            <telerik:RangeDataPoint Category="5" Low="3" High="9" />
            <telerik:RangeDataPoint Category="6" Low="3" High="7" />
            <telerik:RangeDataPoint Category="7" Low="3" High="3" />
        </telerik:RangeSeries.DataPoints>
    </telerik:RangeSeries>
</telerik:RadCartesianChart>

Regards,
Martin
Telerik

[Amige]

Hi Martin,

That works perfect for me.

Thanks,

Alberto

[Benny]

Hi,

I ran into a very similar problem. I have two ScatterLineSeries and I want  to colorize the space between them.

I don't want to use the 'RangeSeries', because that forces me to use 'CategoricalAxis' instead of 'LinearAxis'. My point is, I have a startvalue (x > 0, y > 0) and an endvalue. Those two values should be connected by a line and the horizontal axis should start with 0.

Thanks for reply,

Benny

[Martin Ivanov]

Hi Benny,

The Cartesian chart component doesn't have a built-in mechanism to color the space between line series. In order to achieve such visualization you can try several approaches:

• You can use RangeSeries as described in my previous approach.
• Or you can use a custom annotation which could display a Path that represents the area between the lines. However, using this approach you will need to recalculate the Data of the custom shape every time the chart is updated.
• If you do not have grid defined in the chart, you can try an approach with couple ScatterAreaSeries. The first one will represent the bottom line series and it will have a Fill that matches the background of the plot area. This way only the stroke of the series will be noticeable and it will look like a line. The second area series will represent the second line (above the first one) and it will be defined behind the first series. Its fill will be the area between the lines.

I hope this information helps.

Regards,
Martin
Telerik

[Benny]

Hi Martin,

thanks for your reply. I found out, that it's possible to define multiple axis for one direction, so I took a serial and a categorical axis for the horizontal direction. This soolved my problem. I'm not totally happy with this, but it works for me.

Regards, Benny