[SOLVED] Stacked Bars with different colors

Stacked Bars with different colors

I was looking at the stacked bars for chart js (https://www.chartjs.org/docs/latest/samples/bar/stacked.html)

They seem to be pretty much automatically stack bars together, which is not exactly what i want. In my case, let's just say i want to draw 5 vertical bars, and each of these bars have 2 values. The before value and the after value.

For example, let's say that the before value s $10,000 and the after values is $8,000. I want to draw a stacked bar where the $10,000 bar is blue in color and the 8,000 is yellow in color, while their difference, the $2,000 is red, indicating a visual $2,000 loss of that initial amount of $10,000.

Likewise, if the before value is $10,000 and the after value is $12,000, the bar color from $10,000 to $12,000 would be green, to indicate a gain.

Is there an example of a chart of that sort somewhere ? I have been struggling to make this work :/

Solution

Not exactly sure what your ultimate goal is for an output, but I think this is the basic idea of what you are after.

const stats = {
  base: [800, 600],
  gain: [0, 0],
  loss: [0, 200],
}


const labels = ["Total", "breakdown"];
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Base Money',
      data: stats.base,
      backgroundColor: "green",
    },
    {
      label: 'Gains',
      data: stats.gain,
      backgroundColor: "lime",
    },
    {
      label: 'Losses',
      data: stats.loss,
      backgroundColor: "red",
    },
  ]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
  }
};

var ctx = $('#myChart');
var myChart = new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<div class="graph">
  <div class="chart-legend">

  </div>
  <div class="chart">
    <canvas id="myChart"></canvas>
  </div>
</div>