kendo ui - barchart labels position assign depending on the conditions

Question

I want to barchart labels position assign depending on the conditions. As the ratio of the amount of data is different, there is a phenomenon that the label is cut off in small data.

The position of the current label is "insideEnd". If the status value is 2, can I give the option of outside end?

here is my code

function createExecutionToday(type) {

  $("#" + type).kendoChart({
    dataSource: {
      transport: {
        read: {
          url: "dashboard/" + type + ".json",
          dataType: "json"
        }
      },
      schema: {
        data: function(response) {
          for (i in response) {
            var status = response[i].status;
            response[i].status = toKorean(status);
          }
          return response;
        }
      },
    },
    legend: {
      visible: false
    },
    chartArea: {
      border: {
        width: 10,
        color: "white"

      },
      margin: {
        top: 40,
        left: 20,
        bottom: 30
      },

      background: "#ffffff",
    },
    seriesDefaults: {
      type: "bar",
      labels: {
        visible: true,
        position: "insideEnd",

        template: "#if (value > 0) {# #: value # #}#",
        font: "bold 12px arial",
        background: "transparent"

      },
      overlay: null
    },
    series: [{
      field: "count",
      color: function(status) {
        var colors = ["#DB7196", "#66CCFF", "#E5B055"];
        return colors[status.index];
      },
      border: {
        width: 0
      }
    }],

    categoryAxis: {
      categories: [success, running, check],
      majorGridLines: {
        visible: false
      },
      line: {
        visible: false
      },
      labels: {
        font: "bold 12px arial",
        color: "black",
      }
    },
    valueAxis: {

      labels: {
        format: "{0}%"
      },
      line: {
        visible: false
      },
      labels: {
        visible: false
      },
      majorGridLines: {
        visible: false
      },
    },

  });
}

Answer 1

You can use the Visual property of the label to reposition it depending on the value of status or even the width of the bar.

  labels: {
    visible: true,
    position: "insideEnd",
    template: "#if (value > 0) {# #: value # #}#",
    font: "bold 12px arial",
    background: "transparent",
    visual: function(e) {
        if (e.dataItem.status == 2 || e.rect.size.width < 40){
            var x = e.rect.origin.x + e.rect.size.width + 4;
            var y = e.rect.origin.y + (e.rect.size.height - 12)/2;
            return new kendo.drawing.Text(e.text, [x, y], {
                font: "bold 12px arial",
                fill: {
                    color: "black",                             
                }
            });
        } else {
            return e.createVisual();
        }
    }
  },

NOTE: return e.createVisual(); draws the default label

DEMO