Show Series Label in the Top Left Corner of the Kendo UI Column Chart

Environment

Product Version	2020.1.219
Product	Progress® Kendo UI® Chart for jQuery

Description

How can I show the Series Label in the top left corner of the Kendo UI Column Chart?

Solution

In order to show the Series Labels in the top left corner of the Kendo UI Column Chart Series, use the series.labels.visual function:

$("#chart").kendoChart({
  series: [{
    color: "#190663",
    labels: {
      visible: true,
      position: "center",
      visual: left,
      template: "Value: #: value #"
    },
    data: [1, 2]
  }]
});

function left(e) {
  var layout = new kendo.drawing.Layout(e.rect, {
    orientation: "vertical"
  });
  var text1 = new kendo.drawing.Text(e.text, [e.rect.origin.x, e.rect.origin.y], {
    fill: {
      color: "#fff"
    }});
  layout.append(text1);
  layout.reflow();
  return layout;
}

Make sure to set the series.labels.position.

Example

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      color: "#190663",
      labels: {
        visible: true,
        position: "center",
        visual: left,
        template: "Value: #: value #"
      },
      data: [1, 2]
    }]
  });

  function left(e) {
    var layout = new kendo.drawing.Layout(e.rect, {
      orientation: "vertical"
    });
    var text1 = new kendo.drawing.Text(e.text, [e.rect.origin.x, e.rect.origin.y], {
      fill: {
        color: "#fff"
      }});
    layout.append(text1);
    layout.reflow();
    return layout;
  }
</script>

See Also

• series.labels
• series.labels.visual
• series.labels.position