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

Environment

Product Version 2020.1.219
Product Chart for Progress® Kendo UI®

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

In this article
Not finding the help you need? Improve this article