When enabling stacked100, no interaction with chart possible

[christo-ph]

I have a simple chart, which works as expected when I do not enable stacked100.

As soon as I set in Options stacked100: {enable: true}, the charts is correctly displayed as a stacked bar chart. But there is no interaction at all possible: If I hover over the bars, no tooltips are displayed, when I want to disable a dataset, the click does nothing at all.

It seems "dead" somehow. No errors are displayed in the console.

[y-takey]

@christo-ph , Thank you for the issue. :) Could you provide source code to reproduce the issue?

[christo-ph]

Hi, here an example with a newly generated angular (8) project:

npm install -g @angular/cli@latest
ng new stacked100
cd stacked100

Install necessary packages in the newly generated project:

npm install chart.js ng2-charts chartjs-plugin-stacked100

Edit src/app/app.module.ts:

import {ChartsModule} from 'ng2-charts';

@NgModule({
  ...
  imports: [BrowserModule, ChartsModule],
  ...
})

I used the example from https://valor-software.com/ng2-charts/#BarChart, added it to src/app/app.component.html

<div>
  <div>
    <div style="display: block">
      <canvas baseChart
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [plugins]="barChartPlugins"
        [legend]="barChartLegend"
        [chartType]="barChartType">
      </canvas>
    </div>
    <button mat-button mat-raised-button color="primary" (click)="randomize()">Update</button>
  </div>
</div>

And eventually added the source code to the ts file (without the data labels plugin):

import {Component, OnInit} from '@angular/core';
import {ChartOptions, ChartType, ChartDataSets} from 'chart.js';
import * as pluginStacked100 from 'chartjs-plugin-stacked100';
import {Label} from 'ng2-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'stacked100';

  public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: {xAxes: [{}], yAxes: [{}]},
    plugins: {
      stacked100: {
        enable: true,
      },
    },
  };
  public barChartLabels: Label[] = [
    '2006',
    '2007',
    '2008',
    '2009',
    '2010',
    '2011',
    '2012',
  ];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [pluginStacked100];

  public barChartData: ChartDataSets[] = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
  ];

  constructor() {}

  ngOnInit() {}

  // events
  public chartClicked({
    event,
    active,
  }: {
    event: MouseEvent;
    active: {}[];
  }): void {
    console.log(event, active);
  }

  public chartHovered({
    event,
    active,
  }: {
    event: MouseEvent;
    active: {}[];
  }): void {
    console.log(event, active);
  }

  public randomize(): void {
    // Only Change 3 values
    const data = [
      Math.round(Math.random() * 100),
      59,
      80,
      Math.random() * 100,
      56,
      Math.random() * 100,
      40,
    ];
    this.barChartData[0].data = data;
  }
}

serve it

ng serve

The chart is depicted as expected, but no interaction possible:

If I set

 plugins: {
      stacked100: {
        enable: false,
      },
    },

The chart is displayed as normal bar chart, tooltips are shown and interaction is possible again:

[y-takey]

Thanks for the example, I can reproduce the issue. but it seems very strange. Sorry, I don't know about angular, so i have no idea.

[kbabraj]

I am also facing same issue any fix for this issue?. Angular 12, chart.js@^2.9.3;ng2-charts@^2.2.0 and chartjs-plugin-stacked100@^0.7.1

[y-takey]

@kbabraj Unfortunately, chartjs-plugin-stacked100 is not support chart.js@2 currently. I recommend that you consider updating chart.js@3 and chartjs-plugin-stacked100@1.

[kbabraj]

Thanks for the reply, I tried with chart.js@3.7.1 and chartjs-plugin-stacked100@1.6.0 but stacked is not working. Please find my source code below,

Angular JS import { Component, OnInit } from '@angular/core'; import { ChartOptions, ChartType, ChartDataset, Chart } from 'chart.js'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent {

public barChartOptions: ChartOptions = { responsive: true,

plugins: {
  stacked100: {
    enable: true,
    replaceTooltipLabel: true,
}
}

}; public barChartLabels: any[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; public barChartType: ChartType = 'bar'; public barChartLegend = true;

public barChartData: ChartDataset[] = [
  { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', stack: 'a' },
  { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B', stack: 'a' }
];

constructor() { } ngOnInit() { } }

HTML Code

[y-takey]

Do you register the plugin to chart.js?

import { Chart } from "chart.js";
import ChartjsPluginStacked100 from "chartjs-plugin-stacked100";

Chart.register(ChartjsPluginStacked100);

[kbabraj]

I tried in many places to register this plugin but no luck, please review and me know the below code what is wrong in this. import { Component, OnInit } from '@angular/core'; import { ChartOptions, ChartType, ChartDataset, Chart } from 'chart.js'; import ChartjsPluginStacked100 from "chartjs-plugin-stacked100";

Chart.register(ChartjsPluginStacked100); @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent {

public barChartOptions: ChartOptions = { responsive: true,

plugins: {
  stacked100: {
    enable: true,
    replaceTooltipLabel: true,
}
}

}; public barChartLabels: any[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; public barChartType: ChartType = 'bar'; public barChartLegend = true;

public barChartData: ChartDataset[] = [
  { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', stack: 'a' },
  { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B', stack: 'a' }
];

constructor() { Chart.register(ChartjsPluginStacked100); // bug fix chartjs/angular. registerer stacked100 plugins }

ngOnInit() { Chart.register(ChartjsPluginStacked100); // bug fix chartjs/angular. registerer stacked100 plugins

} }

[y-takey]

Sorry, I don't know much about angular.js so I can't review it.

[kbabraj]

ok, can I get some sample for Angular reference to use this plugin?

[kbabraj]

Thank you so much for the support , it's resolved the ng2-charts is caused the issue, y axis only shows 0, 10 , ..100 how to change this to 0%, 10% etc..

[kbabraj]

Chart display Label shows the calculated data not a original data, what would be the reason?. this stopped to click anything on the chart.

[kbabraj]

it seems to be beforeUpdate continuously calling clone array and other function and it's not cancelling. Also original data overridden by new data