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

Updated on Sep 11, 2026

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:

javascript

$("#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

The following example demonstrates a Column Chart that renders the series label in the top-left corner of each bar by using a custom visual function.

Example

View Source

<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