Can I set dynamic value in data?

[Kesslarr]

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

[Kesslarr]

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

[y-takey]

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

can chart.js give backgroundColor automatically?

maybe, you can use a plugin: https://github.com/nagix/chartjs-plugin-colorschemes

[Kesslarr]

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!