[Chartjs]-Show ChartJS Stacked bar on another bar for Target vs Sales analysis

2👍

This looks roughly what like what you want:

var data = {
  labels: ["Paris", "London", "Mumbai"],
  datasets: [{
    label: "Store",
    backgroundColor: 'blue',
    data: [15, 20, 25],
    xAxisID: "bar-x-axis2",
    stack: "background"
  }, {
    label: "Online",
    backgroundColor: 'red',
    data: [30, 25, 15],
    xAxisID: "bar-x-axis2",
    stack: "background"
  }, {
    label: "Target",
    backgroundColor: 'rgba(0,0,0,0.5)',
    data: [30, 40, 50],
    xAxisID: "bar-x-axis1",
    fill: false
  }]
};

var options = {
  scales: {
    xAxes: [{
      id: "bar-x-axis2",
      stacked: true,
      categoryPercentage: 0.5,
      barPercentage: 0.5,
    },  {
      display: false,
      id: "bar-x-axis1",
      type: 'category',
      categoryPercentage: 0.4,
      barPercentage: 1,
      gridLines: {
        offsetGridLines: true
      },
      stacked: true
    }],
    yAxes: [{
      max: 100,
      min: 0,
      stacked: true
    }]

  }
};

var ctx = document.getElementById("canvas").getContext("2d");
var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

Leave a comment