New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Plotbands
Updated over 6 months ago
Plot Bands are colored ranges, which are used to highlight certain areas in the ASP.NET Core Chart. You can create them by setting:
ValueAxis -> PlotBands -> bands.Add().From(10000).To(30000).Color("#c00").Opacity(0.3);
Each Plot Band could be configured independently by specifying the following properties:
- From — the start position of the plot band.
- To — the end position of the plot band.
- Opacity — the opacity of the plot band.
- Color — the color of the plot band.
The following implementation demonstrates the code needed for setting Plotbands for Bar Chart:
Razor
@(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()
.Name("chart")
.Title("Spain electricity production (GWh)")
.Legend(legend => legend
.Position(ChartLegendPosition.Right)
)
.DataSource(ds => ds
.Read(read => read.Action("_SpainElectricityProduction", "Bar_Charts"))
.Sort(sort => sort.Add("Year").Ascending())
)
.Series(series =>
{
series.Column(model => model.Nuclear).Name("Nuclear").CategoryField("Year");
series.Column(model => model.Hydro).Name("Hydro").CategoryField("Year");
series.Column(model => model.Wind).Name("Wind").CategoryField("Year");
})
.CategoryAxis(axis => axis
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
.MajorUnit(10000)
.Max(70000)
.Line(line => line.Visible(false))
.PlotBands(bands => {
bands.Add().From(10000).To(30000).Color("#c00").Opacity(0.3);
bands.Add().From(30000).To(30500).Color("#c00").Opacity(0.8);
})
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}")
)
) Overview of Plotbands implementation for Bar Chart:
