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

3 posts, 0 answers
  1. Hao
    Hao avatar
    3 posts
    Member since:
    May 2014

    Posted 01 Mar Link to this post

    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 ?.

     

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 03 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Ehtesham
    Ehtesham avatar
    3 posts
    Member since:
    Jul 2015

    Posted 24 Aug Link to this post

    For others like me who weren't satisfied with a static div element that is visible on mousehover event, I search more and came across this webpage 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>

Back to Top