[Chartjs]-ChartJs pie legend position

by

1👍

✅

you can use of chart piece plugin for this.

see the below code. I hope this will solve the issue

happy coding 🙂

var oilCanvas = document.getElementById("oilChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;

var oilOptions = {
  plugins: {
    labels: [{
      render: 'percentage',
      position: 'outside',
      textMargin: 6,
      render: function(args) {
        return `${args.label} (${args.value}%)`
      }
    }]
  },
  legend: {
    display: false
  },
}


var oilData = {
  labels: [
    "Saudi Arabia",
    "Russia",
    "Iraq",
    "UAE",
    "Canada"
  ],

  datasets: [{
    data: [133.3, 86.2, 52.2, 51.2, 50.2],
    backgroundColor: [
      "#FF6384",
      "#63FF84",
      "#84FF63",
      "#8463FF",
      "#6384FF"
    ]
  }]
};

var pieChart = new Chart(oilCanvas, {
  type: 'pie',
  data: oilData,
  options: oilOptions
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="oilChart" width="600" height='400'></canvas>

Leave a comment