Somehow the label doesn't show up for the top section of the bar chart

[send2sunil]

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

regards,
Sunil

[y-takey]

Hi @we-own-it ,
Did you mean you want to show horizontal bar chart?
Could you provide your source code?

[send2sunil]

hi @y-takey,
Thanks for your reply. am attaching another screenshot to explain better.

It shows all labels when i change to horizontal one but not for bar type of chart

Regards,
Sunil

[send2sunil]

adding the horizontal one too.

[send2sunil]

hi Y-takey,

"chart.js": "2.7.2",
"chartjs-plugin-stacked100": "0.4.5",
"chartsjs-plugin-data-labels": "^0.1.5"

these are the versions am using. let me know if versioning is the issue and what is the correct versions which i should use for the above 3.

Regards,
we

[y-takey]

Hi @we-own-it , Thanks for the detail. and sorry I overlooked the issue title at first :(

I couldn't reproduce this issue.
my environments is

chart.js: 2.7.3
chartjs-plugin-stacked100: 0.4.6
chartsjs-plugin-data-labels: 0.5.0

and my example code is:

const chart = new Chart(document.getElementById("my-chart-1"), {
  type: "bar",
  // type: "horizontalBar",
  data: {
    labels: ["2010-2015", "2016", "2017", "2018", "2019"],
    datasets: [
      { label: "IG", data: [0, 250, 7417.5, 650, 1455], backgroundColor: "rgba(244, 143, 177, 0.6)" },
      { label: "HY", data: [0, 0, 0, 1000, 0], backgroundColor: "rgba(255, 235, 59, 0.6)" },
      { label: "NR", data: [0, 675, 4182.5, 1505, 1735], backgroundColor: "rgba(100, 181, 246, 0.6)" }
    ]
  },
  options: {
    plugins: {
      stacked100: { enable: true },
      datalabels: {
        anchor: "end",
        align: 'bottom',
        formatter: (_value, context) => {
          const { datasetIndex, dataIndex } = context;
          const rawValue = context.chart.data.originalData[datasetIndex][dataIndex]
          return rawValue || "";
        }
      }
    }
  }
});

The result:

---

Could you try again after upgrade your versions?

[send2sunil]

hi @y-takey,
are you using this version only for labels?
https://github.com/garipov/chartsjs-plugin-data-labels#readme
somehow the version you mentioned chartsjs-plugin-data-labels: 0.5.0 doesn't work with npm install.
plz try and let me know. if I move to non stacked100 chart then the labels do show up fine.

regards,
we

[send2sunil]

Hi @y-takey,
so i nailed down the issue. its the title that creates the issue.
title: {
display: true,
text: 'Testing for me'
},

Think you can even try ur sample with a title. any suggestions on how to handle title with the stacked100.

regards,
we

[y-takey]

Oh, sorry I looked chartjs-plugin-datalabels ( NOT data-labels)

Do you need to support chartjs-plugin-data-labels ?

[kbabraj]

I am creating the bar chart with below combination, all good only the issue is 'datalabels" shows up the calculated value as default after mouse over the original data comes up. any help would be great.

	"chart.js": "^3.7.1",
	"chartjs-plugin-datalabels": "^2.0.0",
	"chartjs-plugin-stacked100": "^1.2.0",

When I use the below code it's throws error originalData is not a property.

plugins: { display: true, datalabels: { display: true, formatter: (value, context) => { const data = context.chart.data; const datasetIndex = context.datasetIndex; const dataIndex = context.dataIndex; if (data.originalData[datasetIndex][dataIndex] === 0) { return ''; } return data.originalData[datasetIndex][dataIndex]; } }, stacked100: {enable: true} }

[y-takey]

@kbabraj Can you provide a repository that can reproduce the problem?

[kbabraj]

Thank for the reply, by changing the below code I can see the original value now,

plugins: {
datalabels: {
display: true,
formatter: (value, context) => {
const datasetIndex = context.datasetIndex;
const dataIndex = context.dataIndex;
if(context.chart.data['originalData'][datasetIndex][dataIndex] === 0) {
return '';
}
return context.chart.data['originalData'][datasetIndex][dataIndex];
}
},
stacked100: {enable: true},
}

[y-takey]

you can use triple backticks syntax to format code. :)
FYI: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#quoting-code