score:0

i have updated source code from headhunterkev, plugin label is removed.

the idea is using startangle: 20 and css transform to rotate the chart.

new chart(document.getelementbyid("pie-chart"), {
      type: "polararea",
      data: {
        labels: ["dummy1", "dummy 2", "dummy 3", "dummy 4"],
        datasets: [
          {
            data: [125, 375, 300, 240],
            backgroundcolor: "#57c5c8",
            borderwidth: 4,
            hoverbordercolor: "white",
            label: "dummy dummy "
          }
        ]
      },
      options: {
        cutoutpercentage: 20,
        legend: {
          display: false
        },
        layout: {
          padding: 0
        },
        startangle: 20,
        scale: {
          ticks: {
            max: 450,
            maxtickslimit: 1,
            display: false
          },
          anglelines: {
            display: true
          },
          pointlabels: {
            display: true
          }
        }
      }
    });
#pie-chart{
  transform: rotate(-25deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.bundle.js"></script>
<div>
    <canvas id="pie-chart" width="200" height="200"></canvas>
  </div>

please run code snipped to view the result, please optimize rotate value to get the best result.

score:1

here's my solution with the datalables plugin.

https://jsbin.com/bigedugasi/1/edit?html,js,output

i have updated my previous solutions to make the chart responsive.

    plugins: {
      datalabels: {
        formatter: function(value, context) {
          return context.chart.data.labels[context.dataindex];
        },
        anchor: 'start',
        align: 'end',
        offset: 0 // gets updated
      }
    },
    onresize: function() {
      let width = document.getelementbyid("pie-chart").width
      let padding = mychart.options.layout.padding
      mychart.options.plugins.datalabels.offset = width/2-padding
    }

Related Query

More Query from same tag