New to Telerik UI for ASP.NET MVC? Download free 30-day trial


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:

        .Title("Spain electricity production (GWh)")
        .Legend(legend => legend
        .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}"))
            .Line(line => line.Visible(false))
            .PlotBands(bands => {
        .Tooltip(tooltip => tooltip

Overview of Plotbands implementation for Bar Chart:

UI for ASP.NET MVC Plotbands

See Also

In this article