Open ertugrulkutluer opened 4 years ago
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/VwaMowV
https://codepen.io/vencra/pen/PoNJMqY (Case 2 SVG output)
https://codepen.io/vencra/pen/PoNJMqY
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.
Try the new API version (currently 3.0.8)
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);
Thank you.