title: Kendo want to add specific label for each graph point
body: <p>I am using Kendo charts and want to add a specific label to each point on the graph, not related to the data value of that point, but rather a symbol relating to a qualitative property of that point.</p>
  
  <p>In this code, I am able to customize the label on a per-series basis, where the default is an up-arrow, India is a *, and Russian Federation is a space. But it doesn't let me vary the label on a per-point basis within each series. Any way to do that? Any way to have an array of label values for each series, or something like that? </p>
  
  <p>Thanks!</p>
  
  <p>--Bruce</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;base href="http://demos.telerik.com/kendo-ui/bar-charts/column"&gt;
      &lt;style&gt;html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }&lt;/style&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" /&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" /&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" /&gt;
  
      &lt;script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="example"&gt;
      &lt;div class="demo-section k-content wide"&gt;
          &lt;div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
          function createChart() {
              $("#chart").kendoChart({
                  title: {
                      text: "Gross domestic product growth /GDP annual %/"
                  },
                  legend: {
                      position: "top"
                  },
                  seriesDefaults: {
                      type: "column",
                      labels: {template: "↑",
                               visible: true, color: 'red',
                                     position: "outsideEnd"}
                  },
                  series: [{
                      name: "India",
                      data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
                      labels: {template: "*"}
                  }, {
                      name: "Russian Federation",
                      data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3],
                      labels: {template: " "}
                  }, {
                      name: "Germany",
                      data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
                  },{
                      name: "World",
                      data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
                  }],
                  valueAxis: {
                      labels: {
                          format: "{0}%"
                      },
                      line: {
                          visible: false
                      },
                      axisCrossingValue: 0
                  },
                  categoryAxis: {
                      categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                      line: {
                          visible: false
                      },
                      labels: {
                          padding: {top: 135}
                      }
                  },
                  tooltip: {
                      visible: true,
                      format: "{0}%",
                      template: "#= series.name #: #= value #"
                  }
              });
          }
  
          $(document).ready(createChart);
          $(document).bind("kendo:skinChange", createChart);
      &lt;/script&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>