New to Kendo UI for jQuery? Download free 30-day trial

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

In this article