Sign in


Sign up


Bar Chart Jquery

MDB SupportCategory: MDB jQueryBar Chart Jquery
kimfreesland Pro User asked 1 week ago in MDB pro, version:4

Hello,

I just want to add another bar for my bar chart. I just have one bar for now but how do I add another bar.

So I need a bar for Quarter and a bar for Milestone.  Right now I just have one bar for a quarter. Is it possbile to add

the second bar for this particular bar chart?

//bar
varctxB=document.getElementById(“barChart”).getContext(‘2d’);
varmyBarChart=newChart(ctxB, {
type:’bar’,
data: {
labels: [“Quarter 1”, “Quarter 2”, “Quarter 3”, “Quarter 4”],
datasets: [{
label:’% quarterly accomplished’,
data: [100, 90, 70, 80, 20],
backgroundColor: [
‘rgba(255, 99, 132, 0.3)’,
‘rgba(41, 182, 246, 0.3)’,
‘rgba(255, 187, 51, 0.3)’,
‘rgba(66, 133, 244, 0.3)’,

],
borderColor: [
‘rgba(255,99,132,1)’,
‘rgba(41, 182, 246, 1)’,
‘rgba(255, 187, 51, 1)’,
‘rgba(66, 133, 244, 1)’,

],
borderWidth:2
}]
},

Jakub Strebeyko replied 24 hours ago

Always happy to help. 🙂 Take care!

kimfreesland Pro User replied 3 days ago

Thank you Jakub! This helped a lot, and works great with Fiscal Year/quarterly projections now for our dashboards. 🙂

1 Answers
Best Answer
Jakub Strebeyko answered 5 days ago

Hi there kimfreesland,

Thanks for contributing to our forum with your question. So, firstly I’ll allow myself to assume that what you mean by “I just have one bar” is “I just have one bar-chart (as in set of bars), and so what you want to do is to have a second set of data represented by yet another set of bars within the same chart.

If that’s the case I’m happy to inform you that yes, you definitely can can do that. Do you see the datasets array? It is an array of objects storing the data for your charts. Append another data-object do it (I additionally took it out of myBarChart into a data variable for clarity) and voilĂ ! You got yourself another set of bars onto the same chart.


var ctxB=document.getElementById("barChart").getContext("2d");
var data = {
labels: ["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"],
datasets: [{
label:"% quarterly accomplished",
data: [100, 90, 70, 80, 20],
backgroundColor: [
"rgba(255, 99, 132, 0.3)",
"rgba(41, 182, 246, 0.3)",
"rgba(255, 187, 51, 0.3)",
"rgba(66, 133, 244, 0.3)",
],
borderColor: [
"rgba(255,99,132,1)",
"rgba(41, 182, 246, 1)",
"rgba(255, 187, 51, 1)",
"rgba(66, 133, 244, 1)",
],
borderWidth:2
}, {
label: "just whatever",
data: [2, 8, 15, 18, 100],
backgroundColor: [
"rgba(66, 133, 244, 0.3)",
"rgba(255, 187, 51, 0.3)",
"rgba(41, 182, 246, 0.3)",
"rgba(255, 99, 132, 0.3)"
],
backgroundColor: [
"rgba(66, 133, 244, 1)",
"rgba(255, 187, 51, 1)",
"rgba(41, 182, 246, 1)",
"rgba(255,99,132,1)"
]
}]}
var myBarChart=new Chart(ctxB, {
type:"bar",
data: data
});

With Best Regards,
Kuba