y-takey / chartjs-plugin-stacked100 Goto Github PK

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.

Sorry. I am new to JavaScript. I would like to ask is there any methods to include a CDN for this plugin in my .html file so that I can use this plugin inside my JavaScript files?

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,

I have been working on a 100% stacked bar chart and once I initialized the chartjs-plugin-stacked100 on the plugins object, the bars stopped displaying.

Without the chartjs-plugin-stacked100:

With the chartjs-plugin-stacked100:

It is worth pointing out that I'm using chartjs 4.2.1 and chartjs-plugin-stacked100 1.3.0.
The dataset structure is:

[
...

{
  label: "sweater",
  data: [
    {
      channel_name: "facebook",
      product_category: "sweater",
      purchase_amount: 169816.56
    },
    {
      channel_name: "google ads",
      product_category: "sweater",
      purchase_amount: 216422.88
    },
    {
      channel_name: "instagram",
      product_category: "sweater",
      purchase_amount: 190589.4
    },
    {
      channel_name: "tiktok",
      product_category: "sweater",
      purchase_amount: 195401.69
    }
  ],
  parsing: {
    xAxisKey: "purchase_amount",
    yAxisKey: "channel_name"
  }
}

...
]

You can find the setup running on the link below:
https://codesandbox.io/s/happy-fermat-lyxmmj?file=/src/script.js

Please, let me know if you have any clue of what is going on.
Thank you!

Chart.js 3.0 is out now. It'd be great to see this plugin updated

My plugin option object uses replaceTooltipLabel as an inherited property, not an own property.

So the line 132 pluginOptions.hasOwnProperty("replaceTooltipLabel") && ... return in any case false and does not apply the tooltip replacement.
It should be "replaceTooltipLabel" in pluginOptions && ... instead, no?

I use this library in my project and use jsDelivr to install it. It works great but I don't like having to refer to the master branch as the source as this may be modified over time and I don't want to risk anything breaking at my end.

Could you create a tag of the master branch so I can point to a this instead please. I would really appreciate it. Thanks.

Hello,

it would be nice to have feature where you can select which scales should be used for stackings.

Case:
I have some data that needs to be stacked (scale Y1), - they should be presented as bars.
And I have some data that should be presented as line (scale Y2).

For example:
https://www.chartjs.org/docs/latest/samples/other-charts/combo-bar-line.html

Currently, this plugin stacks all data, including ones that should not be stacked.

My second bar has 7 * 14.3% what equal to 100.1% This makes grow Y axis to 120%
Raw data contains 7 values with 1.

Is it possible to correct this behavior ? Thanks!

Percentage values:

Raw values:

Replicated At Case.1 basic pattern

Issue: By clicking to hide all datapoints using the legend, the chart is unable to re-render correctly when clicking on legend to show data. Singular hiding and showing does not seem to have an issue.

Hello,

I'm trying to use this plugin in a Vue component via Vue-Chartjs

Can you provide an example how to use it with Vue or provide a component on your script to easily import your plugin?

The chart just shows the percentage value without the % symbol and without the underlying value.

Trying to reproduce this in a code pen but cannot seem to - not sure if this is something to do with me using Vue

(Also side note I can only get it to work if I set stacked: true on the axis - this is not specified in the example)

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 ?

Thanks a ton for the plugin! It works like a charm. I would like to display the original value instead of the rateValue%. Please note, I am using the chartjs-plugin-datalabels to display the data. Without chartjs-plugin-stacked100 it displays the original value, once i include it for 100% stacked chart, the display label changes to rate percentage. What change should i make?

I'd like to show the raw tooltip legend percentage only and not the computed valued. I was able to do it for the bar label but can't seem to get it to work for the tooltip. What would be the proper way?

Hi,
I have case when the values are zero. the tooltips which has zero values appear on the top of bar. How I can hide the tooltips for the zero/null/empty values ?

data: {
    labels: ['Group A','Group B','Group C', 'Group D','Group E'],
    datasets: [
      { label: 'Red', data: [100,"","","",""], backgroundColor: 'rgba(255, 99, 132, 0.3)' },
      { label: 'Blue', data: [200,"","","",""], backgroundColor: 'rgba(255, 206, 86, 0.3)' },
      { label: 'Green', data: ["",150,"","",""], backgroundColor: 'rgba(153, 102, 255, 0.3)' },
      { label: 'Orange', data: ["",300,"","",""], backgroundColor: 'rgba(255, 159, 64, 0.3)' },
      { label: 'Yellow', data: ["","",112,"",""], backgroundColor: 'rgba(65, 110, 160, 0.3)' },
      { label: 'Purple', data: ["","",210,"",""], backgroundColor: 'rgba(50, 1, 165, 0.3)' },
      { label: 'Pink', data: ["","","",30,""], backgroundColor: 'rgba(165, 10, 16, 0.3)' },
      { label: 'Black', data: ["","","",60,""], backgroundColor: 'rgba(120, 92, 12, 0.3)' },
      { label: 'Brown', data: ["","","","",130], backgroundColor: 'rgba(13, 102, 255, 0.3)' },
      { label: 'white', data: ["","","","",320], backgroundColor: 'rgba(130, 102, 25, 0.3)' },
  ]

Thanks & Regards

hi,
i want to use this plugin in my django project.
i can not use npn is there a way to add this using CDN or direct download and then <script src="xyz.js"></script> ?

I'm apply this on angular, and it is showing the following errors : "node_modules/chartjs-plugin-stacked100/build/index.d.ts:4:32 - error TS2307: Cannot find module 'chart.js/dist/chunks/helpers.core' or its corresponding type declarations."

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 #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!

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.

Hi I was not able to see the labels with the percentage according to documentation. I have this:
In My HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>TestRigor Runs</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<style>
canvas{
    background:#fff;
    height:200px;
}
</style>

</head>
<body>
<h1>TestRigor runs</h1>

</body>
<canvas id="RCS_Retailerchart" height="250"></canvas>
<script type="application/javascript" src="build-runs.js"></script>
</html>

My JS file:

var ctx = document.getElementById('RCS_Retailerchart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [ "88719:22-10-2021", "88705:21-10-2021",  "88595:20-10-2021",  "88564:19-10-2021" ],
            datasets: [{
                label: 'Untested',
                backgroundColor: "#eaeaea",
                data: [ 12, 12, 12, 12 ],,
                }, {
                label: 'Failed',
                backgroundColor: "#f1888f",
                data: [ 20, 20, 23, 20 ],,
                }, {
                label: 'Passed',
                backgroundColor: "#56b985",
                data: [ 36, 36, 33, 36 ],
                }],
        },
        options: {
            tooltips: {
                callbacks: {
                    label: (tooltipItem) => {
                        const data = tooltipItem.chart.data;
                        const datasetIndex = tooltipItem.datasetIndex;
                        const index = tooltipItem.dataIndex;
                        const datasetLabel = data.datasets[datasetIndex].label || "";
                        // You can use two type values.
                        // `data.originalData` is raw values,
                        // `data.calculatedData` is percentage values, e.g. 20.5 (The total value is 100.0)
                        const originalValue = data.originalData[datasetIndex][index];
                        const rateValue = data.calculatedData[datasetIndex][index];
                        
                        return `${datasetLabel}: ${rateValue}% (raw ${originalValue})`;
                    }
                }
            },
            plugins: {
                stacked100: { enable: true, replaceTooltipLabel: false }
            },
            datalabels: {
                formatter: (_value, context) => {
                    const data = context.chart.data;
                    const { datasetIndex, dataIndex } = context;
                    return `${data.calculatedData[datasetIndex][dataIndex]}% (${data.originalData[datasetIndex][dataIndex]})`;
                }
            },
            scales: {
                x: {
                    stacked: true,
                },
                y: {
                    stacked: true
                }
            },
            responsive: true,
            maintainAspectRatio: false,
        }
    });

but when I see the tooltip I get this:

What Am I doing wrong?

When I try to import with the following lines as documented,

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

Chart.register(ChartjsPluginStacked100);

The error keeps showing ReferenceError: self is not defined..

I cant seems to figure out what is the issue

I'm using version:-

"chart.js": "^4.2.0",
"chartjs-plugin-stacked100": "^1.3.0",
"react-chartjs-2": "^5.2.0",

When you have negative values in the dataset, the percentage is computed without using the absolute value of the data:

IMO, this wrong and the values are not represented correctly:

After adjusting min and max of the x-axis to -100 and 200, respectively (so we can see all the bars):

Suggestion:
Compute the percentage using absolute value of the data (for reference this is also how it is done in MS Excel):

I submitted a pull request.

Hi,
it shows fine if i change bar to horizontalbar chart.

regards,
Sunil

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?

It is shown every 10, but I would like to be able to configure and add the percent sign.

The first image is how I would like to leave it and the second is how it looks. They have different data, but just exemplify the markings in the bar

Bug reproduce

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>

<body>
</body>

</html>

v1.5.0 works well but v1.5.1
I think this error is related to #87 and 49b3fd2.

Occasionally, the calculations made by this plugin will cause the final result to 100.1 instead of 100. This causes the chart to have another Y axis point. See example image below for reference.

As you can see, the third column is just slightly over 100 (adding up to 100.1) which creates this issue.

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: #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)

@y-takey I am using react-chartjs-2 and chartjs-plugin-stacked100 in react single page components.
when I use stacked bar chart, when the component got re-rendered, stacked bars are not as same as with full width on initial render.

when the component re-rendered, it is changed as follows.

I am using as follows:
ChartJS.register(ChartjsPluginStacked100)
<Bar height="35px"
data= {data}
options={{
indexAxis: 'y',
responsive: false,
maintainAspectRatio: false,
scales: {
x: {
display: false,
grid: {
display: false,
},
stacked: true,
},
y: {
display: false,
title: "yaxis",
grid: {
display: false,
},
stacked: true,
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
},
stacked100: {
enable: true
},
},
}}
/>

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 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:

Initially while hovering over the bars the values shown are the data that I specified in the data set. But once I click on any legend(This will make that portion to disappear) and hover over any bars the values shown are percentage values. Please fix this bug

If a dataset is initially hidden, the other datasets are not scaled up to 100%:

whereas if the dataset is initially visible and then the legend clicked to hide it, the other datasets are properly scaled up to 100%:

repro case: https://codepen.io/_gb/pen/qBPXMLm

thanks for all the work you do in maintaining this plugin!

who can help me solve this problem and thanks

Not sure whether to log this here or at https://github.com/chartjs/chartjs-plugin-datalabels, so I'll do both.

chartjs-plugin-datalabels adds numerical labels atop the chart shapes.

When combined with chartjs-plugin-stacked100, it creates a problem on hover - the datalabels are re-set, changed from the percentage-of-stack value back to the raw values.

Example jsfiddle: https://jsfiddle.net/y9j0ngrd/

Hi there,
it's a wonderful plugin, I really need this.
I want to ask that I would like to get some information from DB, and put these in stacked 100% bar, can I do that?

I tried this:

getSpace: function () {
            let _this = this;
            $.getJSON('/dataset/space', function (res) {
                _this.spaceList = res;
                let data = [];
                let color = ["rgba(244, 143, 177, 0.6)", "rgba(255, 235, 59, 0.6)", "rgba(100, 181, 246, 0.6)"];
                let i = 0;
                for (let key in _this.spaceList) {
                    let type = {
                        label: key,
                        data: _this.spaceList[key],
                        backgroundColor: color[i]
                    }
                    data.push(type);
                    i++;
                }

                new Chart(document.getElementById("storage"), {
                    type: "horizontalBar",
                    data: {
                        labels: ["空間"],
                        datasets: data
                    },
                    options: {
                        plugins: {
                            stacked100: {enable: true}
                        }
                    }
                });
}

and this got an error:

chartjs-plugin-stacked100.js:122 Uncaught TypeError: dataset.data.some is not a function
    at chartjs-plugin-stacked100.js:122
    at Array.some (<anonymous>)
    at chartjs-plugin-stacked100.js:121
    at Array.forEach (<anonymous>)
    at Object.beforeInit (chartjs-plugin-stacked100.js:119)
    at Object.notify (Chart.min.js:7)
    at Qe.initialize (Chart.min.js:7)
    at Qe.construct (Chart.min.js:7)
    at new Qe (Chart.min.js:7)
    at Object.success (dataset.js:70)

I also want to ask if there have any way to give random backgroundColor for each other? Or I have to do what I'm trying to do?

Thanks.
Kase

Input
chartdata.push({ label: 'test1' , data: [4,6,2,6,7] , backgroundColor: 'rgb(223, 229, 239)'});
chartdata.push({ label: 'test2' , data: [4,6,2,1,2] , backgroundColor: 'rgb(195, 229, 239)'});
chartdata.push({ label: 'test3' , data: [4,6,2,3,5] , backgroundColor: 'rgb(155, 229, 239)'});
chartdata.push({ label: 'test4' , data: [4,6,7,6,6] , backgroundColor: 'rgb(175, 229, 239)'});

see chartjs/chartjs-plugin-datalabels#388 (comment)

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] }
]

after init stacked100, when I filtered a legend then max height changed but after reload fixed 100% even filtering

any ideas on how to get the plugin to be recognized when chart creation is called through angular-chart?

the index.d.ts file is not in the build folder

The plugin is having issues with IE(Internet Explorer). I'm facing this issue with IE - "Object doesn't support property or method 'from'".

When I load data into stacked100 with ChartDataLabels, the initial data displayed area wrong.
The right numbers appears after I move mouse hover the component.

Using stacked horizontal bars. When updating datasets bars are not redrawing. If i disable the plugin the bars updates as expected.

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.