score:1

Accepted answer

The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterLayout hook for creating different gradients for each value of the third dataset (the totals).

Please take a look at your amended code below and see how it works. You may also consult this StackBlitz that illustrates how it can be done with react-chartjs-2.

const data = [
  { type: "Sample 1", data: [600, 400, 200, 800] }, 
  { type: "Sampel 2", data: [700, 300, 600, 600] }, 
  { type: "Total", data: [1300, 700, 800, 1400] }
];

new Chart('myChart', {
  type: "bar",
  plugins: [{
    afterLayout: chart => {
      let ctx = chart.chart.ctx;
      ctx.save();
      let yAxis = chart.scales["y-axis-0"];
      let yBottom = yAxis.getPixelForValue(0);
      let dataset = chart.data.datasets[2];
      dataset.backgroundColor = dataset.data.map(v => {
        let yTop = yAxis.getPixelForValue(v);
        let gradient = ctx.createLinearGradient(0, yBottom, 0, yTop);
        gradient.addColorStop(0.4, '#FFFFFF');
        gradient.addColorStop(1, '#acd7fa');
        return gradient;
      });
      ctx.restore();
    }
  }],
  data: {
    labels: ["A", "B", "C", "D"],
    datasets: [{
        label: data[0].type,
        xAxisID: "x1",
        data: data[0].data,
        backgroundColor: "rgb(54, 162, 235)",
        barPercentage: 1
      },
      {
        label: data[1].type,
        xAxisID: "x1",
        data: data[1].data,
        backgroundColor: "rgb(255, 159, 64)",
        barPercentage: 1
      },
      {
        label: data[2].type,
        xAxisID: "x2",
        data: data[2].data,
        barPercentage: 1
      }
    ]
  },
  options: {
    legend: {
      labels: {
        filter: item => item.text != 'Total'
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          stepSize: 200
        }
      }],
      xAxes: [{
          id: 'x1'
        },
        {
          id: 'x2',
          display: false,
          offset: true
        }
      ]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="150"></canvas>


Related Query

More Query from same tag