Can you have multiple chart bands for the same axis?

[Matt Smith]

I have a use case of displaying athlete weights over time. There is also a constraint of a weight range that is being targeted to which is defined over time as well.

With that, I am trying to display multiple plot bands showing the target weight range (y axis) for a given period (x axis).. I am able to plot the weights however the plot bands do not show up.

For example, one target range is between March 3, 2019 and February 10, 2022 and  the second range is February 11, 2022 onwards.

[Rumen]

Hi Matt,

An example of defining PlotBands is available in the online demos:
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/plot-bands/defaultcs.aspx 

In addition, multiple plot bands can be defined programmatically in the following manner:

chart1.PlotArea.YAxis.PlotBands.Add(new PlotBand(1,3, Color.Red, 125));
chart1.PlotArea.YAxis.PlotBands.Add(new PlotBand(3, 4, Color.Orange, 125));
chart1.PlotArea.YAxis.PlotBands.Add(new PlotBand(4, 7, Color.Green, 125));
 
chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(0, 1, Color.Red, 125));
chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(1, 3, Color.Orange, 125));
chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(3, 5, Color.Green, 125));

[Matt Smith]

Rumen,

I saw that example, however, I was asking if you can have two different plot bands for the SAME axis. The sample shows one band for the X and another for the Y.

[Rumen]

Here is how to define multiple plot bands for the same Axis:

        chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(0, 1, Color.Red, 125));
        chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(1, 3, Color.Orange, 125));
        chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(3, 4, Color.Green, 125));
        chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(4, 5, Color.Blue, 125));

 

Here is how they render on my side:

 

I have attached my test pages too.

[Matt Smith]

Rumen,

Thanks for the reply. Below is the effect I am trying to achieve

And this is the code:

Telerik.Web.UI.PlotBand plotband1 = new Telerik.Web.UI.PlotBand();
plotband1.FromDate = new DateTime(2019, 3, 3);
plotband1.ToDate = new DateTime(2022, 2, 10);
plotband1.From = 69;
plotband1.To = 71;
plotband1.Color = System.Drawing.Color.FromArgb(0x8dd7af);
WeightTrend.PlotArea.YAxis.PlotBands.Add(plotband1);
Telerik.Web.UI.PlotBand plotband2 = new Telerik.Web.UI.PlotBand();
plotband2.FromDate = new DateTime(2022, 3, 18);
plotband2.ToDate = DateTime.Now;
plotband2.From = 69;
plotband2.To = 73;
plotband2.Color = System.Drawing.Color.FromArgb(0x8dd7af);
WeightTrend.PlotArea.YAxis.PlotBands.Add(plotband2);

I can see that the bands are going full width or height. Based on what I am seeing (or more like not seeing), that a rectangular plot band is probably not achievable.

Cheers,

 

Matt.

 

[Rumen]

Hi Matt,

The only option is to draw a custom plot band (or whatever shape you want) on the chart render. There is a similar example Render Custom Plot Bands in the Chart for a custom line, but you can draw a Rectangle with the Kendo Drawing API.

You can see how to access the Kendo Chart widget from RadHtmlChart here.

[Matt Smith]

Rumen,

Thanks for the info. I will take a look at both.

Cheers,

Matt.