chartjs add dots to bars in grouped bar chart - charts

Question

With chart.js I have grouped bars.
I have grouped bars with certain dynamic values, but I also have the expectations of those values. So I want to add an indicator of the expectation to the grouped bars.
Basically, a simpler version of this:
Instead of dots, it could also be a line or something.
I have now a group bar chart with some dots that the same stack as the corresponding bars, but the dots don't connect to the bars. How to remedy this?
var data = {
labels: ["January", "February", "March"],
datasets: [
{
label: "Apples",
type: "scatter",
fill: false,
showLine: false,
backgroundColor: "rgba(99,255,132,0.2)",
data: [40, 20, 20],
stack: 'Stack 1'
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 'Stack 1'
},
{
label: "Apples",
type: "scatter",
fill: false,
showLine: false,
backgroundColor: "rgba(99,255,132,0.2)",
data: [30, 30, 10],
stack: 'Stack 2'
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 'Stack 2'
},
{
label: "Apples",
type: "scatter",
fill: false,
showLine: false,
backgroundColor: "rgba(99,255,132,0.2)",
data: [20, 10, 30],
stack: 'Stack 3'
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 'Stack 3'
},
]
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
xAxes: [{
//stacked: true,
}],
yAxes: [{
ticks: {
max: 160,
},
stacked: true,
}]
}
}
});
Here's my fiddle: http://jsfiddle.net/CorneelDragon/kd9xqnc1/23/

Answer 1

I was looking to do this exact same thing. I ended using a scatter plot with its own x-axis, with the max value being calculated from the number of stacks and groups.
Here's an updated fiddle using a scatter graph to plot the points. You could easily hide the additional x-axis.
http://jsfiddle.net/bpcLs7uz/
var data = {
labels: ["January", "February", "March"],
datasets: [
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 'Stack 1'
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 'Stack 2'
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 'Stack 3'
},
{
label: "Scatter 1",
type: "scatter",
fill: false,
showLine: false,
backgroundColor: "rgba(99,255,132,0.2)",
data: [{y:30, x:1}, {y:30, x:5}, {y:10, x:9}],
xAxisID: 'x-axis-2'
},
{
label: "Scatter 2",
type: "scatter",
fill: false,
showLine: false,
backgroundColor: "rgba(99,255,132,0.2)",
data: [{y:24, x:2}, {y:10, x:6}, {y:15, x:10}],
xAxisID: 'x-axis-2',
showLine: true
},
{
label: "Scatter 3",
type: "scatter",
fill: false,
showLine: false,
backgroundColor: "rgba(99,255,132,0.2)",
data: [{y:50, x:3}, {y:9, x:7}, {y:60, x:11}],
xAxisID: 'x-axis-2'
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
xAxes: [{
stacked: true,
}, {
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
display: true,
ticks: {
beginAtZero: true,
min: 0,
max: 12,
stepSize: 1
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
max: 160,
},
stacked: true,
}]
}
}
});```