[Chartjs]-Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars

by

3👍

✅

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>

Leave a comment