I was thinking about a new feature: it would mix stacked bar and group bar, as well as the individual feature that was already implemented in you plugin (in the version 1.2.0). So in the end, we would have stack bars (each bar contains a set of data), and they are grouped. But in each group, the biggest bar is scaled to 100% (as it is already the case with the individual option, but it is relative to each group, not globally).

Do you think that it would be easy to implement? does it makes sense to you ? For my personal interest it would be really helpful, but I'm sure some other people may be interested =D

Here is a draft of this feature:

I have an idea about a new feature (or if it is already existing, I would be really interested!)

Beeing able to scale the highest bar to 100%, and the rest would be proportional to the highest bar of a stack. Does it make sense that I post this here, or should I post it elsewhere ?

I am trying to use chartjs-plugin-stacked100 in a React App:

import React, { useEffect, useState } from 'react';
import { Chart } from 'react-chartjs-2';
import ChartjsPluginStacked100 from 'chartjs-plugin-stacked100';

const ConnectedTime = () => {
  // https://designcode.io/react-hooks-handbook-usestate-hook
  // https://designcode.io/react-hooks-handbook-fetch-data-from-an-api
  useEffect(() => {   }, []);
  return <>
      {
	<div>
	    <ChartjsPluginStacked100
	      type="bar"
	      data={{
    		labels: ["Foo", "Bar"],
    		datasets: [
    		  { label: "bad", data: [5, 25], backgroundColor: "rgba(244, 143, 177, 0.6)" },
    		  { label: "better", data: [15, 10], backgroundColor: "rgba(255, 235, 59, 0.6)},
        	  { label: "good", data: [10, 8], backgroundColor: "rgba(100, 181, 246, 0.6)" }]	
          }}
	      options={{ 
    		indexAxis: "y",
	    	plugins: {
		      stacked100: { enable: true }
		    }
	      }} />
	</div>
      }
  </>
}

export default ConnectedTime

When I yarn start this piece of code, I get the error:

TypeScript error in /home/mihamina/.../src/Components/ConnectedTime/ConnectedTime.tsx(4,37):
Could not find a declaration file for module 'chartjs-plugin-stacked100'. 
'/home/mihamina/.../node_modules/chartjs-plugin-stacked100/build/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/chartjs-plugin-stacked100` if it exists 
or add a new declaration (.d.ts) file containing 
`declare module 'chartjs-plugin-stacked100';`

Issuing npm i --save-dev @types/chartjs-plugin-stacked100 : The package does not exist.

I dont quite understand about the .d.ts file:

• Do I create it at the root of the project? (same folder as package.json?)
• Is the required name really .d.ts or should I prepend the name with chartjs-plugin-stacked100?

Hi,

very nice library. I have a use case where I want to show a grouped set of stacked bars. The system did not differ between the stacks, so that all items over all stackgroups will be used to calculation the 100%.

BR

Short example

labels: ["C1", "C2"],
    datasets: [
        { label: "L1", stack: 'Stack 0', data: [3, 2] },
        { label: "L2", stack: 'Stack 0', data: [1, 1] },
        { label: "L1", stack: 'Stack 1', data: [0, 3] },
        { label: "L2", stack: 'Stack 1', data: [1, 4] }
]

I added a precision option that I needed to add flexibility to the percentage values. These precentage values can be rounded with x fraction digits. It is initialized to 1 which is the default now, but you can have e.g. 99,984% (precision of 3) if you wish. The option is added as option plugins.stacked100.precision. What do you think?

I'm running into a strange bug, where when the data changes for a chart I'm rendering with this plugin, the tooltip callback I'm using isn't being run. Unlike in https://github.com/y-takey/chartjs-plugin-stacked100/issues/10, the bars are redrawing, and the numbers in the tooltips are updating, they just aren't being formatted with the callback I've specified.

I've narrowed it down to this plugin because I have a parallel non-stacked chart using the same options that's not having this issue.

I'm using react-chartjs-2 version 2.7.0 with Typescript.

Thanks!

Stacked100:

stacked:

in stacked100Chart'descriptor "south Dakota" one of legends undefined, so the stacked100 didn't show anything but in stacked chart with same data is fine. Thanks for your attention. I'm looking forward to your reply.

Hello everyone, and first of all, thanks for the work, this plugin is really useful.

I am using it in a React project, and I managed to make it work with typescript as well (it took me some days haha) But now, I observe that the minimum value of my X axis is "wrong:

Actually, it's not totally wrong, because this min value is the overall min value for the whole datasets. I can verify this by hiding the dataset packaging:

So is there a way to recompute the min value, everytime we show/hide a dataset, not to display the overall min, but to have the min according to the showed dataset? So in my example, the effective min in the first example should be -20%, and if I hide the dataset packaging, it should be recomputed, to be -100% It would avoid to have the chart shown on just half of the screen, like on the first screenshot

Thanks for your help!

EDIT: I can see that this -100% is actually maybe not linked to the values itself, but simply because I have negative values, as this comments suggests: https://github.com/y-takey/chartjs-plugin-stacked100/pull/30 But anyway, I'm still interested for some hints about this !

EDIT 2: I also observed that if I update my code, by just adding a blank line (for instance), then save, It will update my react website, and then it will have the wanted behavior (with dynamic min value computed each time a dataset is hidden/shown). So it is not a fix, but I imagine that having the wanted behavior by default should be easy

Here is a reproducible example (it's maybe a bit messy since this is under development, but If you need me to comment something, let me know)

This changes make the plugin only exports itself for a better integration with modern workflows (webpack, etc.). Registering the plugins will be up to the user.

Usage will look like:

import Stacked100 from 'chartjs-plugin-stacked100'

const chart = new Chart(ctx, {
        type: 'bar',
        plugins: [Stacked100],
        // ...
}

Add an option to modify the height. For example

stacked100: {
    enable: true,
    height: 0.8,
}

I have an issue where I have a data label set to anchor at the end and align at the end, and it gets cut off at the top.

In fact, the problem is that I put || 0 in the wrong place. Math.abs returns NaN if input is an undefined value.

Added an example with objects

before: after:

BTW: For some reason, negative values do not work, I will try to fix them too, if I have time. Thank you

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.

Hi y-takey, Thanks for your awesome work of this plugin.

I have some issues and maybe you can help me with them:

1. I'm using datalabels plugin for showing the values over the bars. When i'm NOT using your plugin, the chart looking like this: But when i'm using your plugin, it first replaces the data values with their relative percentage: When we hover once over the chart, the label are changing to the right values

2. The most right tooltip is cut:

Thanks in advance

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.