Hi there, it's a wonderful plugin, I really need this. I want to ask that I wo

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Okay, I found this <a href="https://stackoverflow.com/questions/26397009/how-to-create

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Can I set dynamic value in data? about chartjs-plugin-stacked100 HOT 3 CLOSED

y-takey commented on May 22, 2024

Can I set dynamic value in data?

from chartjs-plugin-stacked100.

Comments (3)

Kesslarr commented on May 22, 2024 1

Hi @y-takey , thanks for your answering.

maybe, you can use a plugin: https://github.com/nagix/chartjs-plugin-colorschemes
I figured out other way to give backgroundColor automatically:

let i = 0;
                let color = [];
                for (let key in _this.spaceList) {
                    let x = Math.floor(Math.random() * 255);
                    let y = Math.floor(Math.random() * 255);
                    let z = Math.floor(Math.random() * 255);
                    color.push("rgba(" + x + "," + y + "," + z + ",0.6)");
                    let type = {
                        label: key,
                        data: [_this.spaceList[key]],
                        backgroundColor: color[i]
                    }
                    data.push(type);
                    i++;
                }

I know this isn't a great way, but it's simple and quick, still thanks for your helping!

from chartjs-plugin-stacked100.

Kesslarr commented on May 22, 2024

Okay, I found this solution
found out there was something I missed in code

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],     -->here has to be            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}
                        }
                    }
                });
}

after that, I can print dynamic chart successfully.

But I still have question, can chart.js give backgroundColor automatically? My datasets would be more and more, is there has any way to give random backgroundColor that same as the number of datasets?

Thanks
Kase

from chartjs-plugin-stacked100.

y-takey commented on May 22, 2024

Hi @Kesslarr , I'm glad that the issue was solved.