Doesn't seem to work with ng2-charts

[jyotidhiman0610]

I installed the plugin as specified in the docs, I am using ng2-charts with following options: public barChartOptions = { plugins: { stacked100: { enable: true }, }, legend: { display: true, position: 'bottom', }, scales: { xAxes: [{ display: true, stacked: true }], yAxes: [{ display: false, stacked: true }], }, };

No percentages are shown for me. The chart still displays value options.

[ankitp047]

hi @jyotidhiman0610 did you find any solution i am also using ng2-charts but my charts didn't stacked at 100 %

[srmccray]

ng2-charts has some additional fiddling to make plugin registration work correctly, once it is hooked in correctly the stacked charts do work.

You'll want to take a look at this issue discussion: https://github.com/valor-software/ng2-charts/issues/752#issuecomment-439060266

[gantispam]

This is not a solution but you found a quick solution for use this lib with angular :

• Create new file stacked-100.lib.ts

  
  import { Chart } from 'chart.js';

/**

• Chart.JS and Angular can be incompatible.
• This function is inspired of lib : https://github.com/y-takey/chartjs-plugin-stacked100

• Add custom plugins for stacked bar with 100% Y axe. */ export const chartJsRegistererStacked100 = () => { const isObject = function (obj) { const type = typeof obj; return type === 'object' && !!obj; };

  const dataValue = function (dataPoint, isHorizontal) { if (isObject(dataPoint)) { return isHorizontal ? dataPoint.x : dataPoint.y; }

  return dataPoint;

  };

  const cloneArray = function (srcAry) { const dstAry = []; const length = srcAry.length;

  for (let i = 0; i < length; i++) {
      dstAry.push(srcAry[i]);
  }
  return dstAry;

  };

  const setOriginalData = function (data) { data.originalData = data.datasets.map(function (dataset) { return cloneArray(dataset.data); }); };

  // set calculated rate (xx%) to data.calculatedData const calculateRate = function (data, isHorizontal, precision) { const visibles = data.datasets.map(function (dataset) { if (!dataset._meta) { return true; }

      for (const i in dataset._meta) {
          return !dataset._meta[i].hidden;
      }
  });
  
  let datasetDataLength = 0;
  if (data && data.datasets && data.datasets[0] && data.datasets[0].data) {
      datasetDataLength = data.datasets[0].data.length;
  }
  const totals = Array.apply(null, new Array(datasetDataLength)).map(function (el, i) {
      return data.datasets.reduce(function (sum, dataset, j) {
          const key = dataset.stack;
          if (!sum[key]) {
              sum[key] = 0;
          }
          sum[key] += Math.abs(dataValue(dataset.data[i], isHorizontal)) * visibles[j];
  
          return sum;
      }, {});
  });
  
  data.calculatedData = data.datasets.map(function (dataset, i) {
      // tslint:disable-next-line:no-shadowed-variable
      return dataset.data.map(function (val, i) {
          const total = totals[i][dataset.stack];
          const dv = dataValue(val, isHorizontal);
          return dv && total ? round(dv / total, precision) : 0;
      });
  });

  };

  const getPrecision = function (pluginOptions) { // return the (validated) configured precision from pluginOptions or default 1 const defaultPrecision = 1; if (!pluginOptions.hasOwnProperty('precision')) { return defaultPrecision; } if (!pluginOptions.precision) { return defaultPrecision; } const optionsPrecision = Math.floor(pluginOptions.precision); if (isNaN(optionsPrecision)) { return defaultPrecision; } if (optionsPrecision < 0 || optionsPrecision > 16) { return defaultPrecision; } return optionsPrecision; };

  const round = function (value, precision) { const multiplicator = Math.pow(10, precision); return Math.round(value 100 multiplicator) / multiplicator; };

  const tooltipLabel = function (isHorizontal) { return function (tooltipItem, data) { const datasetIndex = tooltipItem.datasetIndex; const index = tooltipItem.index; const originalValue = data.originalData[datasetIndex][index]; const rateValue = data.calculatedData[datasetIndex][index];

      return '' + rateValue + '% (' + dataValue(originalValue, isHorizontal) + ')';
  };

  };

  const reflectData = function (srcData, datasets) { if (!srcData) { return; }

  srcData.forEach(function (data, i) {
      datasets[i].data = data;
  });

  };

  // tslint:disable-next-line:no-shadowed-variable const isHorizontalChart = function (chartInstance) { return chartInstance.config.type === 'horizontalBar'; };

  // tslint:disable-next-line:no-shadowed-variable const Stacked100Plugin = { id: 'stacked100',

  // tslint:disable-next-line:no-shadowed-variable
  beforeInit: function (chartInstance) {
      if (!chartInstance.options.stacked100 || !chartInstance.options.stacked100.enable) {
          return;
      }
  
      const xAxes = chartInstance.options.scales.xAxes;
      const yAxes = chartInstance.options.scales.yAxes;
      const isVertical = chartInstance.config.type === 'bar' || chartInstance.config.type === 'line';
  
      [xAxes, yAxes].forEach(function (axes) {
          axes.forEach(function (hash) {
              hash.stacked = true;
          });
      });
      (isVertical ? yAxes : xAxes).forEach(function (hash) {
          if (!hash.ticks.min) {
              const hasNegative = chartInstance.data.datasets.some(function (dataset) {
                  return dataset.data.some(function (value) {
                      return value < 0;
                  });
              });
              hash.ticks.min = hasNegative ? -100 : 0;
          }
          if (!hash.ticks.max) {
              hash.ticks.max = 100;
          }
      });
  
      // Replace tooltips
      if (chartInstance.options.stacked100.hasOwnProperty('replaceTooltipLabel') && !chartInstance.options.stacked100.replaceTooltipLabel) {
          return;
      }
      chartInstance.options.tooltips.callbacks.label = tooltipLabel(isHorizontalChart(chartInstance));
  },
  
  // tslint:disable-next-line:no-shadowed-variable
  beforeDatasetsUpdate: function (chartInstance) {
      if (!chartInstance.options.stacked100 || !chartInstance.options.stacked100.enable) {
          return;
      }
      setOriginalData(chartInstance.data);
      const precision = getPrecision(chartInstance.options.stacked100);
      calculateRate(chartInstance.data, isHorizontalChart(chartInstance), precision);
      reflectData(chartInstance.data.calculatedData, chartInstance.data.datasets);
  },
  // tslint:disable-next-line:no-shadowed-variable
  afterDatasetsUpdate: function (chartInstance) {
      if (!chartInstance.options.stacked100 || !chartInstance.options.stacked100.enable) {
          return;
      }
  
      reflectData(chartInstance.data.originalData, chartInstance.data.datasets);
  }

  };

  if (!(Chart.pluginService as any).getAll().filter(p => p.id === 'stacked100')[0]) { Chart.pluginService.register(Stacked100Plugin); } };

* and on your chart component : 
```js
ngAfterViewInit() {
        const canvas: any = document.getElementById('canvas_' + this.guid);
        const ctx: HTMLCanvasElement = canvas.getContext('2d');

        // bug fix chartjs/angular. registerer stacked100 plugins
        chartJsRegistererStacked100();

        const options: any | Chart.ChartConfiguration = {
            type: this.chart.type,
            data: this.chart.data,
            options: {
                stacked100: {
                    enable: true,
                    replaceTooltipLabel: true,
                }
            },
        };

        const myBar = new Chart(ctx, options);
    }

---

/!\ chartjs-plugin-stacked100's options is not on "plugins" attribut but on "options" attribut !