Chartjs-I want to bind the legend option with checkbox(show legend or not)

0๐Ÿ‘

โœ…

<div>
        <canvas baseChart
        [datasets]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
          [legend]="checkboxChecked"
        [chartType]="chartType"
        [colors] =  chartColors"

        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
        </canvas>
      </div>

You will have a check box as

<input   type="checkbox" [(ngModel)]="checkboxChecked" /><br>

Explanation:

Initialise checkboxChecked:boolean=false; in your component class.

When ever the checkbox is clicked checkboxCheckedwill become true, and your legend will be visible.

[legend] property of ng2-charts is a boolean variable as per the docs here as shown below,

enter image description here

Source

Leave a comment