🐛[BUG]

[tarifalhasan]

how can i make Donut plot with statistics chart responsive

"use client"; import { Pie, PieConfig, measureTextWidth } from "@ant-design/plots"; import React from "react";

const UserAnalyticsPieDonutChart = () => { function renderStatistic( containerWidth: number, text: string, style: React.CSSProperties ) { const { width: textWidth, height: textHeight } = measureTextWidth( text, style ); const R = containerWidth / 2; // r^2 = (w / 2)^2 + (h - offsetY)^2

let scale = 1;

if (containerWidth < textWidth) {
  scale = Math.min(
    Math.sqrt(
      Math.abs(
        Math.pow(R, 2) /
          (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2))
      )
    ),
    1
  );
}

const textStyleStr = `width:${containerWidth}px;`;
return `<div style="${textStyleStr};font-size:${scale}em;line-height:${
  scale < 1 ? 1 : "inherit"
};">${text}</div>`;

}

const data = [ { type: "Baneados", value: 2512, }, { type: "Congelados", value: 1268, }, { type: "Activos", value: 6121, }, ]; const config: PieConfig = { appendPadding: 10, data, angleField: "value", colorField: "type", radius: 1, innerRadius: 0.64, meta: { value: { formatter: (v) => ${v}, }, }, label: { type: "inner", offset: "-50%", style: { textAlign: "center", }, autoRotate: false, content: "{value}", }, statistic: { title: { offsetY: -4, customHtml: (container, view, datum) => { const { width, height } = container.getBoundingClientRect(); const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2)); const text = datum ? datum.type : "total"; return renderStatistic(d, text, { fontSize: 28, }); }, }, content: { offsetY: 4, style: { fontSize: "32px", }, customHtml: (container, view, datum, data) => { const { width } = container.getBoundingClientRect(); const text = datum ? ${datum.value} : ${data?.reduce((r, d) => r + d.value, 0)}; return renderStatistic(width, text, { fontSize: 32, }); }, }, }, // 添加 中心统计文本 交互 interactions: [ { type: "element-selected", }, { type: "element-active", }, { type: "pie-statistic-active", }, ], }; return <Pie {...config} />; };

export default UserAnalyticsPieDonutChart;

[lxfu1]

I'm not sure what you want express, refer to https://ant-design-charts-next.antgroup.com/examples/statistics/pie/#doughnut