Kendo chart categoryAxis -> labels -> template not working with html string

[KV]

Hi.

I use kendo UI 2016 Q1 version: 2016.1.112

                    categoryAxis: {
                        field: "Subject",
                        majorGridLines: {
                            visible: false
                        },
                        labels: {
                            template: '#= <title>value</title> <b>value</b>#'
                        }
                    },

 

I use kendo template expression for raw html with value.

if label template raw html this will show value with bold and have tooltip when hover mouse to this.

Now after i update kendo Q1 2016 it not work. this work with old version 2015.

how to fix this ?.

 

 

[Iliana Dyankova]

Hi Hao,

I replied to the same question in your support ticket (1015756), however I am pasting my answer here too so the other users who are following this thread can read it: 

Kendo UI 2015.1 version marked the transition the kendo Drawing API for rendering. It does not support arbitrary SVG elements as it supports multiple outputs - SVG, VML, Canvas and PDF. The recommended way now for your scenario is using the categoryAxis.labels.visual option. For your convenience I prepared a dojo which should give a basic idea.

Regards,
Iliana Nikolova
Telerik

 

 

[Ehtesham]

For others like me who weren't satisfied with a static div element that is visible on event, I search more and came across this fromTelerik Documents that does exactly what was originally asked in this thread using visual function:

Link to the original website: http://docs.telerik.com/kendo-ui/controls/charts/how-to/html-in-axes-labels
Link to a dojo with the code: http://dojo.telerik.com/OJulaV

<div id="chart"></div>
<script>
  var data = [{
    value: 1,
    category: "Alpha 1"
  },{
    value: 2,
    category: "Alpha 2"
  }, {
    value: 3,
    category: "Alpha 3"
  }, {
    value: 4,
    category: "Alpha 4"
  }, {
    value: 3,
    category: "Alpha 5"
  }, {
    value: 4,
    category: "Alpha 6"
  }];

  $("#chart").kendoChart({
    title: {
      text: "Gross domestic product growth /GDP annual %/"
    },
    dataSource: {
      data: data
    },
    legend: {
      position: "top"
    },
    seriesDefaults: {
      type: "column"
    },
    series: [{
      name: "Series Name",
      field: "value"
    }],
    valueAxis: {
      labels: {
        format: "{0}%"
      },
      line: {
        visible: false
      },
      axisCrossingValue: 0
    },
    categoryAxis: {
      field: "category",
      labels: {
        visual: function(e) {
          // Build an HTML fragment and append it to the body
          var html = $('<div>Category <b>' + e.text + '</b></div>')
            .appendTo(document.body);

          // Create an empty group that will hold the rendered label
          var visual = new kendo.drawing.Group();

          // Store a reference to the target rectangle, see below
          var rect = e.rect;

          kendo.drawing.drawDOM(html)
                        .done(function(group) {
            // Clean-up HTML fragment
            html.remove();

            // Center the label using Layout
            var layout = new kendo.drawing.Layout(rect, {
              justifyContent: "center"
            });
            layout.append(group);
            layout.reflow();

            // Render the content
            visual.append(layout);
          });

          return visual;
        }
      }
    },
    tooltip: {
      visible: true,
      format: "{0}%",
      template: "#= series.name #: #= value #"
    }
  });
</script>