Hi, @kuldeeppatel123

Yes, there is 2way.

1. Download and save

• Download this file and save your storage. (e.g. as "chartjs-plugin-stacked100.js")
• Add <script src="chartjs-plugin-stacked100.js"></script> after <script src="chart.js">.

2. Direct includes

• Add <script src="https://rawgit.com/y-takey/chartjs-plugin-stacked100/master/src/index.js"></script> after <script src="chart.js">.

from chartjs-plugin-stacked100.

I am running into some issue

here is the snippet

........

new Chart(document.getElementById('resource_chart'),{
type: 'bar',
data: {
labels: {{ months|safe }},
datasets: [
{ label: "QUICLOSTEX", data: {{ QUICLOSTEX_data|safe }} , backgroundColor: "#CDDC39" },
{ label: "QLOSTINT", data: {{ QLOSTINT_data|safe }}, backgroundColor: "#9C27B0" },
{ label: "QCE Vetting", data:{{ QCE_Vetting_data|safe }}, backgroundColor: "#E91E63" },
{ label: "QUIC Release", data: {{ QUIC_Release_data|safe }}, backgroundColor: "#2196F3" },
{ label: "QUIC Vetting", data: {{QUIC_Vetting_data |safe }}, backgroundColor: "#673AB7" },
{ label: "QTIL Release", data: {{ QTIL_Release_data|safe }}, backgroundColor: "#00BCD4" },
{ label: "QTIL Vetting", data: {{ QTIL_Vetting_data|safe }}, backgroundColor: "#4CAF50" },
{ label: "QCT Release", data: {{ QCT_Release_data|safe }}, backgroundColor: "#CDDC39" },
{ label: "QCT Vetting", data: {{ QCT_Vetting_data|safe }}, backgroundColor: "#FFEB3B" },
{ label: "QCA Release", data: {{ QCA_Release_data|safe }}, backgroundColor: "#FF9800" },
{ label: "QCA Vetting", data: {{QCA_Vetting_data |safe }}, backgroundColor: "#795548" },
{ label: "QDT Release", data: {{QDT_Release_data |safe }}, backgroundColor: "#9E9E9E" },
{ label: "QDT Vetting", data: {{QDT_Vetting_data |safe }}, backgroundColor: "#009688" },
{ label: "Unknown", data: {{Unknown_data |safe }}, backgroundColor: "#607D8B" },
]
},
options: {
plugins: {
stacked100: { enable: true }
},
legend: {
position: 'right',
},
tooltips: {
mode: 'index',
callbacks: {
// Use the footer callback to display the sum of the items showing in the tooltip
footer: function(tooltipItems, data) {
var sum = 0;
tooltipItems.forEach(function(tooltipItem) {
sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
});
return 'Sum: ' + 0 + ' hrs.';
},
},
footerFontStyle: 'normal'
},
scales: {
xAxes: [{
ticks: {
autoSkip: false
},
gridLines: {
display:false,
},
// stacked: true
}],
yAxes: [{
gridLines: {
drawBorder: false,
},
//stacked: true
}]
}
}
});

if i remove
plugins: {
stacked100: { enable: true }
},
and re enable stacked:true i am seeing the regular stacked bar chart but when i enable the plugin i just see empty chart with yaxis from 0-100 and no bars (see attached screenshots). who to resolve this ?

from chartjs-plugin-stacked100.

@kuldeeppatel123, thanks for the reply.

Could you tell me about that data format? for example, is {{ QUICLOSTEX_data|safe }} django's syntax? how actually data format is?
this plugin currently expect to array of number only. e.g. [10, 20, 30]

from chartjs-plugin-stacked100.

yes it is comming from django and its a simple python list
{{ QUICLOSTEX_data|safe }} = [10,20,30,.....]

from chartjs-plugin-stacked100.

Thanks,

hmm... I tried using your data simplify and replace data with literal data, but i couldn't.
here is tried code and the result: https://codepen.io/anon/pen/vZPara?editors=1010
couly you display codebase (with no django) to reproduce the problem? or you can edit above codepen.

from chartjs-plugin-stacked100.

thank you for all your help :) i found the issue
while gathering the data i wanted to append 0 but i was doing it with a string '0'
Unknown_data = [ item.get('None Vetting' ,'0') for item in table ]
changing it to
Unknown_data = [ item.get('None Vetting',0) for item in table ]
fixed it

from chartjs-plugin-stacked100.

I'm glad the problem was solved. :)

from chartjs-plugin-stacked100.