Search code examples
chartschart.jsmixed

chartjs add dots to bars in grouped bar chart

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:enter image description here

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/

Solution

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