Small value in doughnut chart is not visible - Chartjs

Question

Small data isn't visible for doughnut chart type. Can i resize it without change label value?

My chart options:

options: {
    cutoutPercentage: 65,
    maintainAspectRatio: false,
    legend: {
        display: false
    },
    plugins: {
        datalabels: {
            display: false
        }
    },
    tooltips: {
        enabled: true,
        mode: 'nearest'
    },
     scales: {
        yAxes: [{
            ticks: {
                max: 5,
                min: 0,
                stepSize: 0.5
            }
        }]
    }

}

Example: http://jsfiddle.net/Lkya2tqb/

Answer 1

I converted the dataset to percent and round a small value to 1.

var seriesData = [1,210,215];
var total = seriesData.reduce((a,v) => a + v);
var inPercent = seriesData.map(v => Math.max(v / total * 100, 1)); 

Create callback for tooltip.

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      var value = seriesData[tooltipItem.index];
      var label = data.labels[tooltipItem.index];
      return `${label}: ${value}`;
    }
  }

var seriesData = [1, 210, 215];
var total = seriesData.reduce((a, v) => a + v);
var inPercent = seriesData.map(v => Math.max(v / total * 100, 1));

var labelsData = ["one", "two", "second"];
var backgroundColors = ["#FBC02D", "#E64A19", "#388E3C"]
var t = new Chart(document.getElementById('broadcast').getContext('2d'), {
  type: "doughnut",
  data: {
    datasets: [{
      data: inPercent,
      backgroundColor: backgroundColors,
      hoverBorderColor: "#fff"
    }],
    labels: labelsData,
  },
  options: {
    cutoutPercentage: 65,
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    plugins: {
      datalabels: {
        display: false
      }
    },
    tooltips: {
      enabled: true,
      mode: 'nearest',
      callbacks: {
        label: function(tooltipItem, data) {
          var value = seriesData[tooltipItem.index];
          var label = labelsData[tooltipItem.index];
          return `${label}: ${value}`;
        }
      }
    }


  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="broadcast" width="350" height="250" style="width: 350px; height: 250px;"></canvas>

Answer 2

Added an additional answer for those who may land upon this question.

There was a problem with @Adrug's answer for me as commented by @Akhilesh.

This changes the label value in percentage

I was able to make it work by adding a "hidden" dataset which would then be used for the label.

Ref: https://www.chartjs.org/docs/latest/general/data-structures.html#dataset-configuration

This hides the 2nd dataset from the chart

datasets: [{
    data: inPercent,
    backgroundColor: colors,
    hoverBorderColor: "#fff"
}, {
    data: data,
    hidden: true,
}]

This fetches the values of the hidden dataset[1] and returns it as the the text of the label, instead of using the default dataset[0] as the label.

tooltip: {
    callbacks: {
        label: function(ctx) {
            const data = ctx.chart.data.datasets[1].data;
            const index = ctx.dataIndex;

            return data[index];
        }
    }
}

const data = [1, 210, 215];
const colors = ["#FBC02D", "#E64A19", "#388E3C"]

const total = data.reduce((a, v) => a + v);
const inPercent = data.map(v => v ? Math.max(v / total * 100, 1) : 0);

new Chart(document.getElementById('broadcast').getContext('2d'), {
  type: "doughnut",
  data: {
    labels: ["one", "two", "second"],
    datasets: [{
      data: inPercent,
      backgroundColor: colors,
      hoverBorderColor: "#fff"
    }, {
      data: data,
      hidden: true,
    }],
  },
  options: {
    maintainAspectRatio: false,
    plugins: {
      tooltip: {
        callbacks: {
          label: function(ctx) {
            const data = ctx.chart.data.datasets[1].data;
            const index = ctx.dataIndex;

            return data[index];
          }
        }
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="broadcast" width="350" height="250" style="width: 350px; height: 250px;"></canvas>