Chartjs-Chartjs add dots to bars in grouped bar chart

by

2👍

✅

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,
      }]
    }
  }
});```

Leave a comment