score:-1

the problem with the style is type: 'doughnut'. this will display a doughnut style chart, if you want the pie style you should use type: 'pie'

for more info: http://www.chartjs.org/docs/latest/charts/doughnut.html

also, about the data labels, i don't think that style is currently supported by chartjs, you can try to customize it: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration

or try some options.. https://github.com/chartjs/chartjs-plugin-datalabels

score:2

for having this outlet you must add the following plugin to your project:

chartjs-plugin-piechart-outlabels

read the documentation

score:3

you have to write a plugin to do it. in afterdraw hook, you have to iterate over chart elements and calculate 3 points:

  1. point1: center point of current arc
  2. point2: created by connecting the chart's center and point1, have length = radius + x (x > 0 will give a better visual)
  3. point3: created by connecting point2 with chart's edge (left/right) based on point2.x

draw 2 lines to connect point1 with point2, and point2 with point3 will give you this chart:

https://imgur.com/a/rwav2x3

sample code for chartjs 2.9.4:

const doughnutlabelplugin = {
    afterdraw: (chart) => {
      const ctx = chart.chart.ctx;
      ctx.save();
      ctx.font = "10px 'averta std cy'";
      const chartcenterpoint = {
        x:
          (chart.chartarea.right - chart.chartarea.left) / 2 +
          chart.chartarea.left,
        y:
          (chart.chartarea.bottom - chart.chartarea.top) / 2 +
          chart.chartarea.top
      };
      chart.config.data.labels.foreach((label, i) => {
        const meta = chart.getdatasetmeta(0);
        const arc = meta.data[i];
        const dataset = chart.config.data.datasets[0];

        // prepare data to draw
        // important point 1
        const centerpoint = arc.getcenterpoint();
        const model = arc._model;
        let color = model.bordercolor;
        let labelcolor = model.bordercolor;
        if (dataset.polyline && dataset.polyline.color) {
          color = dataset.polyline.color;
        }

        if (dataset.polyline && dataset.polyline.labelcolor) {
          labelcolor = dataset.polyline.labelcolor;
        }

        const angle = math.atan2(
          centerpoint.y - chartcenterpoint.y,
          centerpoint.x - chartcenterpoint.x
        );
        // important point 2
        const point2x =
          chartcenterpoint.x + math.cos(angle) * (model.outerradius + 20);
        let point2y =
          chartcenterpoint.y + math.sin(angle) * (model.outerradius + 20);

        let value = dataset.data[i];
        if (dataset.polyline && dataset.polyline.formatter) {
          value = dataset.polyline.formatter(value);
        }
        let edgepointx = point2x < chartcenterpoint.x ? 10 : chart.width - 10;

        //draw code
        // first line: connect between arc's center point and outside point
        ctx.strokestyle = color;
        ctx.beginpath();
        ctx.moveto(centerpoint.x, centerpoint.y);
        ctx.lineto(point2x, point2y);
        ctx.stroke();
        // second line: connect between outside point and chart's edge
        ctx.beginpath();
        ctx.moveto(point2x, point2y);
        ctx.lineto(edgepointx, point2y);
        ctx.stroke();
        //fill custom label
        const labelalignstyle =
          edgepointx < chartcenterpoint.x ? "left" : "right";
        const labelx = edgepointx;
        const labely = point2y;
        ctx.textalign = labelalignstyle;
        ctx.textbaseline = "bottom";

        ctx.fillstyle = labelcolor;
        ctx.filltext(value, labelx, labely);
      });
      ctx.restore();
    }
  }

Related Query

More Query from same tag