[Chartjs]-Chart.JS: How can I only display data labels when the doughnut size is big enough for the text?

2๐Ÿ‘

โœ…

Iโ€™m now using a combination of two ideas:

  • Show values only if a certain percentage threshold of the value is not underrun
  • Show values only if a certain graph width is not underrun

The example below shows the idea(s):

formatter: function(value) {
    let percentage = (value.toFixed(2) / sum) * 100;

    if (percentage > 100) {
        percentage = 100;
    }

    if (percentage < 10) {
        return "";
    }

    if (ctx.width <= 200) {
        return "";
    }

    return value + " kWh";
}

0๐Ÿ‘

have you try @FranzHuber23 https://stackoverflow.com/a/56275124/6734130 answer by adding it on formatter: ? Even thought it didโ€™t show โ€˜kWhโ€™ after the number label, you can add a chat legend that explain the data value show in โ€˜kWhโ€™ unit

Leave a comment