Stacked bar charts in chart.js with different values in stacks
0
I want to create a stack graph something like this:
Note: Each stack has different value
Is it possible with chart js ? If yes what my data should look like ?
I have tried this:
var data = {
labels: ["2018", "2019"], //Want "value 1,2,3 for 2018 and value 4,5,6 for 2019"
datasets: [
{
label: "Harpo",
fillColor: "blue",
data: // What should i use here
},
{
label: "Chico",
fillColor: "red",
data: // What should i use here
}
]
};
But this is not what i want.
Any help would be appreciated.
javascript charts ng2-charts
asked Nov 20 '18 at 2:22
user2985842user2985842
177316
add a comment |
0
I want to create a stack graph something like this:
Note: Each stack has different value
Is it possible with chart js ? If yes what my data should look like ?
I have tried this:
var data = {
labels: ["2018", "2019"], //Want "value 1,2,3 for 2018 and value 4,5,6 for 2019"
datasets: [
{
label: "Harpo",
fillColor: "blue",
data: // What should i use here
},
{
label: "Chico",
fillColor: "red",
data: // What should i use here
}
]
};
But this is not what i want.
Any help would be appreciated.
javascript charts ng2-charts
asked Nov 20 '18 at 2:22
user2985842user2985842
177316
how on earth did you draw this example graph
– schellmax
Nov 20 '18 at 13:20
add a comment |
0
0
0
I want to create a stack graph something like this:
Note: Each stack has different value
Is it possible with chart js ? If yes what my data should look like ?
I have tried this:
var data = {
labels: ["2018", "2019"], //Want "value 1,2,3 for 2018 and value 4,5,6 for 2019"
datasets: [
{
label: "Harpo",
fillColor: "blue",
data: // What should i use here
},
{
label: "Chico",
fillColor: "red",
data: // What should i use here
}
]
};
But this is not what i want.
Any help would be appreciated.
javascript charts ng2-charts
asked Nov 20 '18 at 2:22
user2985842user2985842
177316
I want to create a stack graph something like this:
Note: Each stack has different value
Is it possible with chart js ? If yes what my data should look like ?
I have tried this:
var data = {
labels: ["2018", "2019"], //Want "value 1,2,3 for 2018 and value 4,5,6 for 2019"
datasets: [
{
label: "Harpo",
fillColor: "blue",
data: // What should i use here
},
{
label: "Chico",
fillColor: "red",
data: // What should i use here
}
]
};
But this is not what i want.
Any help would be appreciated.
javascript charts ng2-charts
javascript charts ng2-charts
asked Nov 20 '18 at 2:22
user2985842user2985842
177316
asked Nov 20 '18 at 2:22
user2985842user2985842
177316
asked Nov 20 '18 at 2:22
user2985842user2985842
177316
asked Nov 20 '18 at 2:22
user2985842user2985842
177316
asked Nov 20 '18 at 2:22
user2985842user2985842
177316
177316
how on earth did you draw this example graph
– schellmax
Nov 20 '18 at 13:20
add a comment |
how on earth did you draw this example graph
– schellmax
Nov 20 '18 at 13:20
how on earth did you draw this example graph
– schellmax
Nov 20 '18 at 13:20
how on earth did you draw this example graph
– schellmax
Nov 20 '18 at 13:20
add a comment |
1 Answer
1
active
oldest
votes
0
in order to have a stack of 3 bars,
you will need 3 datasets.
to have different colors, use an array for backgroundColor.
see following working snippet...
$(document).ready(function() {
new Chart(document.getElementById("myChart").getContext("2d"), {
type: "bar",
data: {
labels: ["2018", "2019"],
datasets: [
{
backgroundColor: ["#673AB7", "#90A4AE"],
fillColor: "#000000",
data: [1, 4]
},
{
backgroundColor: ["#E1BEE7", "#0D47A1"],
data: [2, 5]
},
{
backgroundColor: ["#BA68C8", "#455A64"],
data: [3, 6]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes:[{
stacked: true
}],
yAxes:[{
stacked: true
}],
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>answered Nov 20 '18 at 13:17
WhiteHatWhiteHat
36.6k61576
any luck with this question?
– WhiteHat
Nov 28 '18 at 12:46
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385321%2fstacked-bar-charts-in-chart-js-with-different-values-in-stacks%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
in order to have a stack of 3 bars,
you will need 3 datasets.
to have different colors, use an array for backgroundColor.
see following working snippet...
$(document).ready(function() {
new Chart(document.getElementById("myChart").getContext("2d"), {
type: "bar",
data: {
labels: ["2018", "2019"],
datasets: [
{
backgroundColor: ["#673AB7", "#90A4AE"],
fillColor: "#000000",
data: [1, 4]
},
{
backgroundColor: ["#E1BEE7", "#0D47A1"],
data: [2, 5]
},
{
backgroundColor: ["#BA68C8", "#455A64"],
data: [3, 6]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes:[{
stacked: true
}],
yAxes:[{
stacked: true
}],
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>answered Nov 20 '18 at 13:17
WhiteHatWhiteHat
36.6k61576
any luck with this question?
– WhiteHat
Nov 28 '18 at 12:46
add a comment |
0
in order to have a stack of 3 bars,
you will need 3 datasets.
to have different colors, use an array for backgroundColor.
see following working snippet...
$(document).ready(function() {
new Chart(document.getElementById("myChart").getContext("2d"), {
type: "bar",
data: {
labels: ["2018", "2019"],
datasets: [
{
backgroundColor: ["#673AB7", "#90A4AE"],
fillColor: "#000000",
data: [1, 4]
},
{
backgroundColor: ["#E1BEE7", "#0D47A1"],
data: [2, 5]
},
{
backgroundColor: ["#BA68C8", "#455A64"],
data: [3, 6]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes:[{
stacked: true
}],
yAxes:[{
stacked: true
}],
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>answered Nov 20 '18 at 13:17
WhiteHatWhiteHat
36.6k61576
any luck with this question?
– WhiteHat
Nov 28 '18 at 12:46
add a comment |
0
0
0
in order to have a stack of 3 bars,
you will need 3 datasets.
to have different colors, use an array for backgroundColor.
see following working snippet...
$(document).ready(function() {
new Chart(document.getElementById("myChart").getContext("2d"), {
type: "bar",
data: {
labels: ["2018", "2019"],
datasets: [
{
backgroundColor: ["#673AB7", "#90A4AE"],
fillColor: "#000000",
data: [1, 4]
},
{
backgroundColor: ["#E1BEE7", "#0D47A1"],
data: [2, 5]
},
{
backgroundColor: ["#BA68C8", "#455A64"],
data: [3, 6]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes:[{
stacked: true
}],
yAxes:[{
stacked: true
}],
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>answered Nov 20 '18 at 13:17
WhiteHatWhiteHat
36.6k61576
in order to have a stack of 3 bars,
you will need 3 datasets.
to have different colors, use an array for backgroundColor.
see following working snippet...
$(document).ready(function() {
new Chart(document.getElementById("myChart").getContext("2d"), {
type: "bar",
data: {
labels: ["2018", "2019"],
datasets: [
{
backgroundColor: ["#673AB7", "#90A4AE"],
fillColor: "#000000",
data: [1, 4]
},
{
backgroundColor: ["#E1BEE7", "#0D47A1"],
data: [2, 5]
},
{
backgroundColor: ["#BA68C8", "#455A64"],
data: [3, 6]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes:[{
stacked: true
}],
yAxes:[{
stacked: true
}],
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>$(document).ready(function() {
new Chart(document.getElementById("myChart").getContext("2d"), {
type: "bar",
data: {
labels: ["2018", "2019"],
datasets: [
{
backgroundColor: ["#673AB7", "#90A4AE"],
fillColor: "#000000",
data: [1, 4]
},
{
backgroundColor: ["#E1BEE7", "#0D47A1"],
data: [2, 5]
},
{
backgroundColor: ["#BA68C8", "#455A64"],
data: [3, 6]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes:[{
stacked: true
}],
yAxes:[{
stacked: true
}],
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>$(document).ready(function() {
new Chart(document.getElementById("myChart").getContext("2d"), {
type: "bar",
data: {
labels: ["2018", "2019"],
datasets: [
{
backgroundColor: ["#673AB7", "#90A4AE"],
fillColor: "#000000",
data: [1, 4]
},
{
backgroundColor: ["#E1BEE7", "#0D47A1"],
data: [2, 5]
},
{
backgroundColor: ["#BA68C8", "#455A64"],
data: [3, 6]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes:[{
stacked: true
}],
yAxes:[{
stacked: true
}],
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>answered Nov 20 '18 at 13:17
WhiteHatWhiteHat
36.6k61576
answered Nov 20 '18 at 13:17
WhiteHatWhiteHat
36.6k61576
answered Nov 20 '18 at 13:17
WhiteHatWhiteHat
36.6k61576
answered Nov 20 '18 at 13:17
WhiteHatWhiteHat
36.6k61576
36.6k61576
any luck with this question?
– WhiteHat
Nov 28 '18 at 12:46
add a comment |
any luck with this question?
– WhiteHat
Nov 28 '18 at 12:46
any luck with this question?
– WhiteHat
Nov 28 '18 at 12:46
any luck with this question?
– WhiteHat
Nov 28 '18 at 12:46
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385321%2fstacked-bar-charts-in-chart-js-with-different-values-in-stacks%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
how on earth did you draw this example graph
– schellmax
Nov 20 '18 at 13:20