Chartjs-Create data in data with Chartjs

by

1👍

✅

Consider all of them as same data set items, But you can group the related ones with the same color. You can even add different labels for them also.

You might have used a different approach but idea can be the same. If you can just paste the actual code you used to draw the chart you have now.

Refer : https://www.chartjs.org/docs/latest/general/colors.html

var chartData = {
    datasets: [{
        data: [45, 25, 20, 10],
        backgroundColor: [
            pattern.draw('square', '#ff6384'),
            pattern.draw('circle', '#36a2eb'),
            pattern.draw('diamond', '#cc65fe'),
            pattern.draw('triangle', '#ffce56'),
        ]
    }],
    labels: ['Red', 'Blue', 'Purple', 'Yellow']
};

Lets say you can divide the 45 to 3 sections, What you can do is,

var chartData = {
    datasets: [{
        data: [20, 10, 15, 25, 20, 10],
        backgroundColor: [
            pattern.draw('square', '#ff6384'),
            pattern.draw('square', '#ff6384'),
            pattern.draw('square', '#ff6384'),
            pattern.draw('circle', '#36a2eb'),
            pattern.draw('diamond', '#cc65fe'),
            pattern.draw('triangle', '#ffce56'),
        ]
    }],
    labels: ['Red','Red','Red', 'Blue', 'Purple', 'Yellow']
};

In your case you have to dynamically update the dataset to include all values as dataset items and you then have to change the backgroud-color and boarder-color arrays accordingly.

For an example let’s say you had an initial dataset like below,

data: [35, 32, 29, 30, 28, 14];
labels: ["Hoofdgerecht", "Nagerecht", "Bijgerecht", "Zout", "Suiker", "Peper"]

Now just assume that you can divide this 35 in the Hoofdgerecht for more sub sets like 10,5,20. The idea is to add them to the original data set like the other normal values.

data: [10, 5, 20, 32, 29, 30, 28, 14];
labels: ["Hoofdgerecht_1", "Hoofdgerecht_2", "Hoofdgerecht_3", "Nagerecht", "Bijgerecht", "Zout", "Suiker", "Peper"]

Leave a comment