sparkline missbehaving

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

    Posted 17 Jul 2014 Link to this post

    Hi,
    I have duplicated the angular js example from telerik's website (http://demos.telerik.com/kendo-ui/sparklines/angular), 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) {
                $scope.weather = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "test_json/weather.json",
                            dataType: "json"
                        }
                    }
                });
            }])

    <div data-kendo-sparkline
                                     data-k-series="[{
                                       type: 'column',
                                       field: 'TMax',
                                       color: '#ff0000',
                                       negativeColor: '#0099ff'
                                     }]"
                                     data-k-tooltip="{ visible: false, shared: false }"
                                     data-k-data-source="weather"
                                     data-k-chart-area="{ background: 'transparent' }"
                                     style="height:50px;"></div>

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

    Thanks,

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 18 Jul 2014 Link to this post

    Hello,

    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
               k-series="[{
                         type: 'column',
                         field: 'TMax',
                         color: '#ff0000',
                         negativeColor: '#0099ff'
                         }]"
               k-tooltip="{ visible: false, shared: false }"
               k-data-source="weather"
               style="line-height:30px;"/>


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

    Regards,
    T. Tsonev
    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
Back to Top