sparkline missbehaving

2 posts, 0 answers
  1. cp
    cp avatar
    44 posts
    Member since:
    Oct 2012

    Posted 17 Jul 2014 Link to this post

    I have duplicated the angular js example from telerik's website (, but I am having some trouble rendering the chart. At times it will render correctly, whereas at other times the width and height seem to be way off.

    Here is my code:
    module.controller('TestController', ['$scope', '$timeout', function ($scope, $timeout) {
                $ = new{
                    transport: {
                        read: {
                            url: "test_json/weather.json",
                            dataType: "json"

    <div data-kendo-sparkline
                                       type: 'column',
                                       field: 'TMax',
                                       color: '#ff0000',
                                       negativeColor: '#0099ff'
                                     data-k-tooltip="{ visible: false, shared: false }"
                                     data-k-chart-area="{ background: 'transparent' }"

    Any ideas why sometimes it will be ok, whereas other times it will not, and this happens in Chrome, FF and IE.


  2. T. Tsonev
    T. Tsonev avatar
    2762 posts

    Posted 18 Jul 2014 Link to this post


    I'm not sure why this is happening, but it looks like the container size is different in some cases.
    Please, try replacing the sparkline element with a span, as it is normally an inline element:
          <span kendo-sparkline
                         type: 'column',
                         field: 'TMax',
                         color: '#ff0000',
                         negativeColor: '#0099ff'
               k-tooltip="{ visible: false, shared: false }"

    Another option would be to specify explicit width through the style.

    T. Tsonev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top