[Chartjs]-ChartJs – Round borders on a doughnut chart with multiple datasets

This is not the exact answer that you might be looking for but this was my requirement to get rounded edges for multiple datasets. This one rounds off one color in each doughnut dataset.

I used the answer at Chart.js Doughnut with rounded edges and text centered and made some changes. Here is the code:

        // round corners
    Chart.pluginService.register({
        afterUpdate: function (chart) {
            if (chart.config.options.elements.arc.roundedCornersFor !== undefined) {
                var a=chart.config.data.datasets.length -1;
                for (let i in chart.config.data.datasets) {
                    var arc = chart.getDatasetMeta(i).data[chart.config.options.elements.arc.roundedCornersFor];

                    arc.round = {
                        x: (chart.chartArea.left + chart.chartArea.right) / 2,
                        y: (chart.chartArea.top + chart.chartArea.bottom) / 2,
                        radius: chart.innerRadius + chart.radiusLength / 2 + (a * chart.radiusLength),
                        thickness: chart.radiusLength / 2 - 1,
                        backgroundColor: arc._model.backgroundColor
                    }
                    a--;
                }
            }
        },

        afterDraw: function (chart) {
            if (chart.config.options.elements.arc.roundedCornersFor !== undefined) {
                var ctx = chart.chart.ctx;
                for (let i in chart.config.data.datasets) {
                    var arc = chart.getDatasetMeta(i).data[chart.config.options.elements.arc.roundedCornersFor];
                    var startAngle = Math.PI / 2 - arc._view.startAngle;
                    var endAngle = Math.PI / 2 - arc._view.endAngle;

                    ctx.save();
                    ctx.translate(arc.round.x, arc.round.y);
                    console.log(arc.round.startAngle)
                    ctx.fillStyle = arc.round.backgroundColor;
                    ctx.beginPath();
                    ctx.arc(arc.round.radius * Math.sin(startAngle), arc.round.radius * Math.cos(startAngle), arc.round.thickness, 0, 2 * Math.PI);
                    ctx.arc(arc.round.radius * Math.sin(endAngle), arc.round.radius * Math.cos(endAngle), arc.round.thickness, 0, 2 * Math.PI);
                    ctx.closePath();
                    ctx.fill();
                    ctx.restore();
                }
            }
        },
    });

Fiddle : http://jsfiddle.net/n6vLv1zv/

Hope it brings you one step closer.

I understand this is an older thread, but I have a similar design problem using "chart.js": "^3.9.1" and "react-chartjs-2": "^4.3.1". My solution was to add 2 "caps" to each arc: one serves as the rounded-spacing between each arcs and one is the rounded cap. Here’s my full code with typings:

import {
  ArcElement as ChartJSArcElement,
  ArcOptions as ChartJSArcOptions,
  ArcProps as ChartJSArcProps,
  Color as ChartJSColor,
  Chart as ChartJS,
  ChartData as ChartJSData,
  DoughnutController as ChartJSDoughnutController,
  Element as ChartJSElement,
  Plugin as ChartJSPlugin,
} from "chart.js";
import { AnyObject as ChartJSAnyObject } from "chart.js/types/basic";
import { Doughnut } from "react-chartjs-2";

ChartJS.register(ChartJSArcElement);

const colors: ChartJSColor[] = ["blue", "red", "green", "yellow"];
const data: ChartJSData<"doughnut"> = {
  labels: colors,
  datasets: [
    {
      data: [500, 100, 300, 250],
      backgroundColor: colors,
      borderWidth: 0,
    },
  ],
};

interface Round {
  x: number;
  y: number;
  radius: number;
  arcColor: ChartJSColor;
}

type CustomElement =
  | (ChartJSElement<
      ChartJSAnyObject | ChartJSArcProps,
      ChartJSAnyObject | ChartJSArcOptions
    > & {
      round?: Round;
    })
  | (ChartJSArcElement<ChartJSArcProps, ChartJSArcOptions> & {
      round?: Round;
    });

const plugins: ChartJSPlugin<"doughnut">[] = [
  {
    id: "arcCaps",
    afterUpdate: function (chart) {
      // we only expect 1 dataset
      const { data, controller } = chart.getDatasetMeta(0);
      const { outerRadius, innerRadius } =
        controller as ChartJSDoughnutController;

      for (let i = data.length - 1; i >= 0; --i) {
        const arc: CustomElement = data[i];

        // determine total radius by diffing outer values
        const radiusLength = outerRadius - innerRadius;

        arc.round = {
          // chart's x/y lengths
          x: (chart.chartArea.left + chart.chartArea.right) / 2,
          y: (chart.chartArea.top + chart.chartArea.bottom) / 2,
          // radius of a single arc
          radius: innerRadius + radiusLength / 2,
          arcColor: arc.options.backgroundColor as ChartJSColor,
        };
      }
    },

    afterDraw: function (chart) {
      const { ctx } = chart;

      // we only expect 1 dataset
      const { data } = chart.getDatasetMeta(0);

      // iterate through each arc's data point
      for (let i = data.length - 1; i >= 0; --i) {
        // extract data
        const arc: CustomElement = data[i];
        const round = arc.round as Round;
        const props = (
          arc as ChartJSArcElement<ChartJSArcProps, ChartJSArcOptions>
        ).getProps([
          "startAngle",
          "endAngle",
          "innerRadius",
          "outerRadius",
          "circumference",
        ]);

        // determine end angle of arc within the donut shape
        const endAngle = Math.PI / 2 - props.endAngle;

        ctx.save();
        ctx.translate(round.x, round.y);

        // generate white arc that serves as padding (assumes background is white)
        ctx.fillStyle = "white";
        ctx.beginPath();
        ctx.arc(
          round.radius * Math.sin(endAngle),
          round.radius * Math.cos(endAngle),
          // twice as wide to smooth out the padding's angles
          props.outerRadius - props.innerRadius,
          // cap should "face" outward from arc's outer boundary
          0 + props.endAngle,
          Math.PI + props.endAngle
        );
        ctx.closePath();
        ctx.fill();

        // generate cap
        ctx.fillStyle = round.arcColor;
        ctx.beginPath();
        ctx.arc(
          round.radius * Math.sin(endAngle),
          round.radius * Math.cos(endAngle),
          (props.outerRadius - props.innerRadius) / 2,
          // draw a full circle for the cap to prevent any spacing issue
          0,
          Math.PI * 2
        );
        ctx.closePath();
        ctx.fill();

        ctx.restore();
      }
    },
  },
];

export default function App() {
  return (
    <div>
      <Doughnut
        width={300}
        height={300}
        data={data}
        plugins={plugins}
        options={{
          maintainAspectRatio: false,
          responsive: true,
          cutout: "90%",
          plugins: {
            tooltip: { enabled: false },
            legend: { display: false },
          },
          elements: {
            arc: { borderWidth: 0 },
          },
        }}
      />
    </div>
  );
}