Search code examples
javascriptchartshtml5-canvaschart.jsbar-chart

Horizontal gradient for every single bar in group chart js

I want the same gradient for the first item in the every group bar

Bar chart

I can set only the first group's first item gradient color.

Note: I can achieve a vertical gradient but how can give horizontal gradient background gradient for every group's first item

================================================================================

Here is my code

 window.onload = function () {
         var ctx = document.getElementById("canvas").getContext("2d");
         // var angle = 45 * Math.PI / 180;
         // var  x2 = 300 * Math.cos(angle);
         // var y2 = 300 * Math.sin(angle);
         var background_1 = ctx.createLinearGradient(0, 0, 150, 0);
         background_1.addColorStop(0, '#005AB1');
         background_1.addColorStop(0.35, '#4F8ED0');
         background_1.addColorStop(0.55, '#BED0F9');
         background_1.addColorStop(0.70, '#AEC9EF');
         background_1.addColorStop(1, '#0069B9');
         
         window.myBar = new Chart(ctx, {
            type: "bar",
            data: {
               labels: [
                  ["𝐉𝐘𝐒𝐄𝐋𝐄𝐂𝐀", "𝟐𝟎𝟎 𝐦𝐠 + 𝐌𝐓𝐗", "(n = 475)"],
                  ["𝐀𝐝𝐚𝐥𝐢𝐦𝐮𝐦𝐚𝐛","+ 𝐌𝐓𝐗","(n = 325)"],
                  ["𝐏𝐥𝐚𝐜𝐞𝐛𝐨","+ 𝐌𝐓𝐗","(n = 475)"]
               ],
               datasets: [
                  {
                     label: "American Express",
                     backgroundColor: [background_1],
                     borderColor: "#005AB1",
                     borderWidth: 1,
                     borderRadius: 15,
                     data: [77, 66, 81]

                  },
                  {
                     label: "Mastercard",
                     backgroundColor: "#DDD2BC",
                     borderColor: "#DDD2BC",
                     borderWidth: 1,
                     borderRadius: 15,
                     data: [71, 31, 78]
                  },
                  {
                     label: "Paypal",
                     backgroundColor: "#C1C1C0",
                     borderColor: "#C1C1C0",
                     borderWidth: 1,
                     borderRadius: 15,
                     data: [50, 38, 71]
                  }
               ]
            },
            options: {
               responsive: true,
               legend: {
                  position: "top"
               },
               title: {
                  display: true,
                  text: "Chart.js Bar Chart"
               }
            },
            //          plugins: [{
            //          beforeInit: function(chart) {
            //             chart.data.labels.forEach(function(e, i, a) {
            //                if (/\n/.test(e)) {
            //                   a[i] = e.split(/\n/);
            //                }
            //             });
            //    }
            // }]
         });
      };
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
</head>
<body>

   <div id="container"
        style="width: 100%;">
      <canvas id="canvas"></canvas>
   </div>

   <!-- script -->
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>

Solution

  • You will need to use a scriptable function in which you pass the correct start and end x values:

    window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");

  window.myBar = new Chart(ctx, {
    type: "bar",
    data: {
      labels: [
        ["𝐉𝐘𝐒𝐄𝐋𝐄𝐂𝐀", "𝟐𝟎𝟎 𝐦𝐠 + 𝐌𝐓𝐗", "(n = 475)"],
        ["𝐀𝐝𝐚𝐥𝐢𝐦𝐮𝐦𝐚𝐛", "+ 𝐌𝐓𝐗", "(n = 325)"],
        ["𝐏𝐥𝐚𝐜𝐞𝐛𝐨", "+ 𝐌𝐓𝐗", "(n = 475)"]
      ],
      datasets: [{
          label: "American Express",
          backgroundColor: (context) => {
            if (!context.element.x || !context.element.width) {
              return
            }

            const {
              ctx
            } = context.chart;

            const {
              x,
              width
            } = context.element;

            const background_1 = ctx.createLinearGradient(x - (width / 2), 0, x + (width / 2), 0);

            background_1.addColorStop(0, '#005AB1');
            background_1.addColorStop(0.35, '#4F8ED0');
            background_1.addColorStop(0.55, '#BED0F9');
            background_1.addColorStop(0.70, '#AEC9EF');
            background_1.addColorStop(1, '#0069B9');

            return background_1;
          },
          borderColor: "#005AB1",
          borderWidth: 1,
          borderRadius: 15,
          data: [77, 66, 81]

        },
        {
          label: "Mastercard",
          backgroundColor: "#DDD2BC",
          borderColor: "#DDD2BC",
          borderWidth: 1,
          borderRadius: 15,
          data: [71, 31, 78]
        },
        {
          label: "Paypal",
          backgroundColor: "#C1C1C0",
          borderColor: "#C1C1C0",
          borderWidth: 1,
          borderRadius: 15,
          data: [50, 38, 71]
        }
      ]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: "top"
        },
        title: {
          display: true,
          text: "Chart.js Bar Chart"
        }
      }
    },
  });
};
    <!DOCTYPE html>
<html lang="en" class="no-js">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
</head>

<body>

  <div id="container" style="width: 100%;">
    <canvas id="canvas"></canvas>
  </div>

  <!-- script -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>

</html>