score:2

Accepted answer

yes!! this can be achieved using a chartjs plugin called - chartjs-plugin-annotation.

here is an example :

rendered chart

line-chart

code used

component.ts

import { component } from '@angular/core';
import 'chartjs-plugin-annotation';

@component({
    selector: 'app-root',
    templateurl: './app.component.html',
    styleurls: ['./app.component.css']
})

export class appcomponent {
    public charttype: string = 'line';
    public chartlabels: string[] = ['jan', 'feb', 'mar', 'apr', 'may'];
    public chartdata: any[] = [{
        data: [3, 1, 4, 2, 5],
        label: 'anthracnose',
        fill: false
    }];
    public chartcolors: any[] = [{
        backgroundcolor: 'rgba(0, 0, 0, 0.2)',
        bordercolor: 'rgba(0, 0, 0, 1)'
    }];
    public chartoptions: any = {
        scales: {
            yaxes: [{
                ticks: {
                    beginatzero: true
                }
            }]
        },
        annotation: {
            drawtime: 'beforedatasetsdraw',
            annotations: [{
                type: 'box',
                id: 'a-box-1',
                yscaleid: 'y-axis-0',
                ymin: 0,
                ymax: 1,
                backgroundcolor: '#4cf03b'
            }, {
                type: 'box',
                id: 'a-box-2',
                yscaleid: 'y-axis-0',
                ymin: 1,
                ymax: 2.7,
                backgroundcolor: '#fefe32'
            }, {
                type: 'box',
                id: 'a-box-3',
                yscaleid: 'y-axis-0',
                ymin: 2.7,
                ymax: 5,
                backgroundcolor: '#fe3232'
            }]
        }
    }
}

component.html

<div class="chart-container">
  <canvas basechart
          [charttype]="charttype"
          [labels]="chartlabels"
          [datasets]="chartdata"
          [colors]="chartcolors"
          [options]="chartoptions">
  </canvas>
</div>

Related Query