Bar Chart Jquery

kimfreesland asked 9 months ago

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
}]
},


kimfreesland commented 9 months ago

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


Jakub Strebeyko commented 9 months ago

Always happy to help. :) Take care!


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


Miguel Angel Moreno commented 8 months ago

hello good morning, how can I make a label with the value appear fixed on the top of each bar?


Jakub Strebeyko commented 8 months ago

Hi Miguel,

Actually, there are at least few ways to achieve this. Firstly, you can use Chart.js itself – take advantage of animation.onComplete event to fire a method iterating over the dataset and creating appropriate text (jsfiddle example). On the other hand, if for some reason you value code brevity over dependency, you could just go for an official plugin to do just that.

With Best Regards,
Kuba


Please insert min. 20 characters.
Status

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No