SVG Render Legends & Labels Problem

[ertugrulkutluer]

Hi, first of all thank you for this useful library.

Part of the legend part doesn't appear when I try to render as SVG. I've added the image below. (Case 1)

Apart from that, when I add the datalabels plugin, the graphic is completely broken. (Case 2)

https://codepen.io/vencra/pen/VwaMowV (Case 1 SVG output)

https://codepen.io/vencra/pen/PoNJMqY (Case 2 SVG output)

My code is:

const width = 400; const height = 400; const chartCallback = (ChartJS) => { ChartJS.defaults.global.animation = false; ChartJS.defaults.global.responsive = false; }; const chartJsFactory = () => { const chartJS = require("chart.js"); require("chartjs-plugin-datalabels"); delete require.cache[require.resolve("chart.js")]; delete require.cache[require.resolve("chartjs-plugin-datalabels")]; return chartJS; }; const canvasRenderService = new CanvasRenderService(width, height, chartCallback, "svg", chartJsFactory);

  (async () => {
    const configuration = {
      type: "pie",
      data: {
        labels: ["Red", "Yellow", "Blue", "Grey", "Black", "Green"],
        datasets: [
          {
            data: [10, 20, 30, 10, 20, 30],
            backgroundColor: [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
              "rgba(255, 159, 64, 0.2)"
            ],
            borderColor: [
              "rgba(255,99,132,1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
              "rgba(255, 159, 64, 1)"
            ],
            borderWidth: 0
          }
        ]
        // These labels appear in the legend and in the tooltips when hovering different arcs
      },
      options: {
        plugins: {
          datalabels: {
            formatter: (value, ctx) => {
              let sum = 0;
              let dataArr = ctx.chart.data.datasets[0].data;
              dataArr.map((data) => {
                sum += data;
              });
              let percentage = ((value * 100) / sum).toFixed(2) + "%";
              return percentage;
            },
            color: "#fff"
          }
        },
        scales: {
          xAxes: [
            {
              beginAtZero: true,
              ticks: {
                autoSkip: false
              }
            }
          ]
        }
      }
    };
    const stream = canvasRenderService.renderToBufferSync(configuration, "image/svg+xml");
    let str = Buffer.from(stream).toString();
    console.log(str);
  })();`

Thank you.

[SeanSobey]

Try the new API version (currently 3.0.8)