Jquery Pie Chart add Background Image on each slice

Question

I want to put a background image on each slice on Piechart. where should I put the background image on this code?

window.onload = function() {

  var mychart = {
    animationEnabled: true,
    legend:{
      horizontalAlign: "top",
      verticalAlign: "top",
      fontColor: "#fff"
    },
    data: [{
      type: "pie",
      showInLegend: true,
      explodeOnClick: false,
      toolTipContent: "<b>{name}</b>",
      indexLabel: "{name}",
      legendText: "{name}",
      indexLabelPlacement: "inside",
      indexLabelFontColor: "#fff",
      indexLabelFontSize: 12,
      indexLabelMaxWidth:100 ,
      dataPoints: [
        { y: 10, name: "BUSINESS BRANDING", link: "https://yourcompanygo.com/business-admin/", color: "#36A2EB"  },
        { y: 10, name: "BUSINESS ASSETS", link: "https://yourcompanygo.com", color: "#FFCE56"},
        { y: 10, name: "BUSINESS FORMATION", link: "https://yourcompanygo.com",  color: "#c0504e"},
        { y: 10, name: "BUSINESS ADMINISTRATIVE", link: "https://yourcompanygo.com/get-started/", color: "#FF6384" }
      ],
      click: function(e) {
        if (e.dataPoint.link) {
          window.open(e.dataPoint.link, "_blank");
        }
      }
    }],
    backgroundColor: "transparent"
  };

  var chart = new CanvasJS.Chart("chartContainer", mychart);

  chart.options.data[0].toolTipContent = "<b>{name}</b>";
  chart.options.data[0].dataPoints.forEach(function (d) {
    d.mouseover = function () {
      chart.options.data[0].dataPoints.forEach(function (p) {
        p.color = (p.name === d.name) ? "red" : p.color;
      });
      chart.render();
    };
    d.mouseout = function () {
      chart.options.data[0].dataPoints.forEach(function (p) {
        p.color = p.color.replace("red", "").trim();
      });
      chart.render();
    };
  });

  chart.render();

};

I already tried indexLabelBackgroundColor: "url(https://example.com/image1.jpg)" on datapoint to change the color to image.see reference url here https://canvasjs.com/jquery-charts/pie-chart-index-data-label-inside/

Answer 1

After investigation (reading plugin documentation) I see that it's not possible to put image as a background of each slice of the piechart.

You should raise a product suggestion to add it, add it yourself or find another plugin that is able to do that.

They have forum and quick chat where you can ask them about this.