shading a scatterline chart

[Justin]

I am trying to shade from the x axis to the scatter line.  Is there a way to do this using the scatterline chart?

[T. Tsonev]

Hello,

This sounds a lot like a combination between the scatter line and the area chart.

Such "scatter area" chart is not supported right now, but there are no technical issues that stop us from implementing it. We'll consider it during our planning for the Q2 release.

Thank you for bringing this up. As a token of gratitude for your involvement your Telerik points have been updated.

Greetings,
Tsvetomir Tsonev
the Telerik team

[David]

There still doesn't appear to be a scatter area chart. Is this going to be implemented?

Use case: A scatter plot with shading to define the accepted / allowed area for data points.

[Tsvetomir]

Hi David,

The Kendo UI Chart widgets allow for having multiple axes at once. Therefore, you would be able to create a Scatter chart with a series of Area Chart which should represent the shady area.

Therefore, the outcome of this approach would be similar to the following one:

https://demos.telerik.com/kendo-ui/area-charts/multiple-axes

And the multi-axis for the scatter chart:

https://demos.telerik.com/kendo-ui/scatter-charts/multiple-axes

I hope this helps.

 

Kind regards,
Tsvetomir
Progress Telerik

[David]

Hi Tsvetomir,

I'm afraid that doesn't really demonstrate how to get a scatter plot and area on the same chart. The links you provided show how to plot multiple Scatter Chart only axes and multiple Area Chart only axes, but not a combination of the two. Are you able to provide an example?

Kind regards,

David

[Tsvetomir]

Hi David,

I have noticed that the current thread is a duplicate with the one below. It is recommended to stick to only one thread as this helps in keeping your history concise.

• https://www.telerik.com/forums/scatter-chart-with-area-of-best-fit

In order to make the answer from the other thread transparent for our community, I am pasting the solution here:

"In general, the Kendo Area Chart and the Scatter Chart depend on different categorial axes. Therefore, the direct integration between the two would not possible. What I can recommend is to draw on the surface of the chart with the help of the Drawing API.

In the example that you have provided, the rectangle element is drawn on top of the chart surface, consuming all events, including the click and hover (needed for the tooltip). In order for the scatter points to be clickable, you would have to draw the elements on the chart's background visual. 

Here is an example:

        render: function(e) {
            var chart = e.sender;
            var xAxis = chart.getAxis("xAxis");
            var yAxis = chart.getAxis("yAxis");
            var xSlot = xAxis.slot(80, -20);
            var ySlot = yAxis.slot(-20, 80);

            var rect = new geom.Rect([
              // Origin X, Y
              xSlot.origin.x, ySlot.origin.y
            ], [
              // Width, height
              xSlot.width(), ySlot.height()
            ]);

            var path = draw.Path.fromRect(rect, {
              stroke: null,
              fill: gradient
            });

          var pane = chart.findPaneByIndex(0);
          pane.chartsVisual.insert(0, path);

            //chart.surface.draw(path);
        }

More information on the findPaneByIndex() method could be found here:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/methods/findpanebyindex 

Check out the following Dojo sample which demonstrates the suggestion above:

https://dojo.telerik.com/EmiDOHex "

 

Regards,
Tsvetomir
Progress Telerik