Plot Bands

The Chart plot bands allow you to highlight a specific range of an axis.

To display plot bands, set the axis plotBands option to an array of PlotBand.

The following example demonstrates how to configure the plot bands of an axis.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="['A', 'B', 'C']" [plotBands]="categoryPlotBands">
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
       <kendo-chart-value-axis>
        <kendo-chart-value-axis-item [plotBands]="valuePlotBands">
        </kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="[1, 2, 3]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    `
})
class AppComponent {
    public categoryPlotBands: any[] = [{
        from: 1,
        to: 2,
        color: '#ffd246',
        opacity: 0.8
    }];

    public valuePlotBands: any[] = [{
        from: 2,
        to: 3,
        color: '#78d237',
        opacity: 0.8
    }];
}

Custom Plot Bands

To visualize the range in a different way or to show additional elements, manually draw the plot bands by using the Drawing API in the render event.

To get the range coordinates:

  1. Find the axis by name.
  2. Use the slot method.

The following example demonstrates how to draw custom plot bands.

import { Path, Group, Text } from '@progress/kendo-drawing';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart (render)="onRender($event)">
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="['A', 'B', 'C']" name="categoryAxis">
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
       <kendo-chart-value-axis>
        <kendo-chart-value-axis-item name="valueAxis">
        </kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="[1, 2, 3]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    `
})
class AppComponent {
    private plotValue: number = 3;

    public onRender = (args: any): void => {
        const chart = args.sender;

        // get the axes
        const valueAxis = chart.findAxisByName("valueAxis");
        const categoryAxis = chart.findAxisByName("categoryAxis");

        // get the coordinates of the value at which the plot band will be rendered
        const valueSlot = valueAxis.slot(this.plotValue);

        // get the coordinates of the entire category axis range
        const range = categoryAxis.range();
        const categorySlot = categoryAxis.slot(range.min, range.max);

        // draw the plot band based on the found coordinates
        const line = new Path({
          stroke: {
            color: "red",
            width: 3
          }
        }).moveTo(valueSlot.origin)
        .lineTo(categorySlot.topRight().x, valueSlot.origin.y);

        const label = new Text('MAX', [0, 0], {
          fill: {
            color: "red"
          },
          font: "14px sans"
        });
        const bbox = label.bbox();
        label.position([ categorySlot.topRight().x - bbox.size.width, valueSlot.origin.y - bbox.size.height ]);

        const group = new Group();
        group.append(line, label);

        // Draw on the Chart surface to overlay the series
        chart.surface.draw(group);
        
        // Or as a first element in the pane to appear behind the series
        // chart.findPaneByIndex(0).visual.insert(0, group);
    }
}

In this article