Chartjs-ChartKick – ChartJs – Legend onClick override with default behaviour

by

0👍

✅

I went round and round trying a range of different implementations to solve this very problem for myself while using ng2-charts (incidentally it is how i found this question). I ended up adding an @ViewChild to reference my chart that was defined in the html.

references needed in the ts for this workaround:

import { Component, Input, Host, OnInit, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
import { ChartsModule, BaseChartDirective } from 'ng2-charts';

added to the top of my class in the ts:

export class StatisticsComponent implements OnInit, OnDestroy {

  @ViewChild('myChart') myChart : BaseChartDirective;

the html object for the chart using ng2-charts:

<canvas *ngIf = "loaded" 
        baseChart
        #myChart = 'base-chart'
        [datasets]="chartData"
        [colors]="chartColors"
        [chartType]="'line'"      
        [labels]="chartLabels"
        [options]="chartOptions"
        [legend]="true"
        (chartClick)="onChartClick($event)">
    </canvas>

In the method you then use for overriding the legend onClick (I personally did it in the chartOptions) you can add this line of code:

this.chart.data.datasets[legendItem.datasetIndex].hidden = !this.chart.data.datasets[legendItem.datasetIndex].hidden;
this.chart.update();

This replicates the standard “onClick” of the legend Item so you dont need to bother storing the original function. Probably important to mention that in this code the legendItem is the second parameter from the onClick (with the first being the event):

function(e: any, legendItem: any)

The only issue with this fix is that by default, in ng2-charts the .hidden artibute is not exposed by default so i had to do a little hack in the module following this method:
https://github.com/valor-software/ng2-charts/issues/915.

While i appreciate your question does not relate to ng2-charts. I imagine that you could likely use a similar method in your wrapper. At the very least I figured that after I managed to sort my problem that I would share with you what I did 🙂

Leave a comment