圆环图中的小值不可见 - 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>