Chartjs-Pie chart js numbers outside of the circle

by

0👍

✅

I found the solution:

Chart.register(ChartDataLabels);

var ctx_tab1 = document.getElementById('myChart-tab1').getContext('2d');
    var labels = ['UNICEF', 'Save the Children', 'UNOCHA', 'World Food Programme', 'WHO', 'UNAMA', 'RED CRESCENT', 'UNFPA', 'UNCHR', 'UN WOMEN', 'WAR CHILD AFGHANISTAN'];
    var doughnutChart = new Chart(ctx_tab1, {
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{
                backgroundColor: [
                    'rgba(255, 99, 132)',
                    'rgba(54, 162, 235)',
                    'rgba(255, 206, 86)',
                    'rgba(75, 192, 192)',
                    'rgba(153, 102, 255)',
                    'rgba(255, 159, 64)',
                    'rgba(255, 99, 132)',
                    'rgba(54, 162, 235)',
                    'rgba(255, 206, 86)',
                    'rgba(75, 192, 192)',
                    'rgba(153, 102, 255)',
                ],
                data: [41, 20, 9, 8, 8, 4, 3, 3, 2, 2, 10],
                datalabels: {
                    anchor: 'end',
                    align: 'end',
                }
            }]
        },
        options: {
            plugins: {
                datalabels: {
                    backgroundColor: function(context) {
                        // return context.dataset.backgroundColor;
                    },
                    // borderColor: 'white',
                    // borderRadius: 25,
                    // borderWidth: 2,
                    // color: 'white',
                    display: function(context) {
                        var dataset = context.dataset;
                        var count = dataset.data.length;
                        var value = dataset.data[context.dataIndex];
                        // return value > count * 1.5;
                        return value;
                    },
                    font: {
                        weight: 'bold'
                    },
                    padding: 0,
                    formatter: function(value) {
                        return value + '%';
                    }
                },
                legend: {
                    display: false,
                    position: 'right',
                    align: 'center',
                    labels: {
                        usePointStyle: true,
                        pointBackgroundColor: "rgba(0,191,255)",
                        pointStyle: 'rectRounded',
                        padding: 10,
                        color: '#000',
                        font: {
                            size: 12
                        },
                    },
                }
            },

            // Core options
            aspectRatio: 4 / 3,
            cutoutPercentage: 32,
            layout: {
                padding: 32
            },
            elements: {
                line: {
                    fill: false
                },
                point: {
                    hoverRadius: 7,
                    radius: 5
                }
            },
        }
    });
*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#container-chart {
  width: 400px;
  height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<div id="container-chart"><canvas id="myChart-tab1"></canvas></div>

1👍

Have you tried chartjs-plugin-datalabels?

const ctx = document.getElementById('myChart');

Chart.register(ChartDataLabels);

const generateColors = (n) =>
  Array.from({ length: n }, (_, i) => `hsl(${i / n * 360}, 100%, 80%)`)

const
  data = [300, 200, 150, 100, 80, 70, 50, 30, 20],
  sum = data.reduce((a, b) => a + b, 0),
  colors = generateColors(data.length);

new Chart(ctx, {
  type: 'pie',
  plugins: [ChartDataLabels],
  data: {
    labels: data.map((_, i) => `d${i+1}`),
    datasets: [{
      label: 'My First Dataset',
      data: data,
      backgroundColor: colors,
      hoverOffset: 4
    }]
  },
  options: {
    borderColor: 'rgba(0, 0, 0, 0.1)',
    color: '#FFF',
    plugins: {
      datalabels: {
        anchor: 'end',
        color: colors,
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
        borderRadius: 12,
        padding: 4,
        formatter: value => `${Math.round(value / sum * 100)}%`,
        labels: {
          title: {
            font: {
              weight: 'bold'
            }
          }
        }
      }
    }
  }
});
*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #000;
  display: flex;
  justify-content: center;
  padding: 4px;
}

.chart-container {
  width: 400px;
  height: 400px;
  background: #222;
  padding: 1rem;
  border: thin solid #777;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

Update

Here is a modified example adapted from your update to the plugin config.

Chart.register(ChartDataLabels);

const generateColors = (n) =>
  Array.from({ length: n }, (_, i) => `hsl(${i / n * 360}, 100%, 67%)`);

const ctx = document.querySelector('#myChart').getContext('2d');

const response = [
  { name: 'UNICEF'                , value: 41 },
  { name: 'Save the Children'     , value: 20 },
  { name: 'UNOCHA'                , value:  9 },
  { name: 'World Food Programme'  , value:  8 },
  { name: 'WHO'                   , value:  8 },
  { name: 'UNAMA'                 , value:  4 },
  { name: 'RED CRESCENT'          , value:  3 },
  { name: 'UNFPA'                 , value:  3 },
  { name: 'UNCHR'                 , value:  2 },
  { name: 'UN WOMEN'              , value:  2 },
  { name: 'WAR CHILD AFGHANISTAN' , value: 10 },
];

const
  data = response.map(d => d.value),
  labels = response.map(d => d.name),
  colors = generateColors(data.length);

const pieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: labels,
    datasets: [{
      backgroundColor: colors,
      data: data,
      datalabels: {
        anchor: 'end',
        align: 'end',
      },
      hoverOffset: 4
    }]
  },
  options: {
    layout: {
      padding: 32
    },
    plugins: {
      datalabels: {
        color: colors,
        padding: 0,
        formatter: (value, { chart: { data: { datasets: [{ data }] } } }) =>
          Math.round(value / data.reduce((a, b) => a + b, 0) * 100) + '%'
      },
      legend: {
        position: 'left',
        align: 'center',
        labels: {
          usePointStyle: true,
          pointStyle: 'rectRounded',
          padding: 10,
          color: '#FFF',
          font: {
            size: 12
          },
        },
      }
    }
  }
});
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #000;
  display: flex;
  justify-content: center;
  padding: 4px;
}

.chart-container {
  width: 400px;
  height: 400px;
  background: #222;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

Leave a comment