Sparkline Height Issues

2 posts, 0 answers
  1. Nomdeplume
    Nomdeplume avatar
    1 posts
    Member since:
    Apr 2013

    Posted 20 Mar 2014 Link to this post

    Hi,

    I have struggled for hours to change the sparkline height, with the latest commercial version of Kendo UI Complete v.2014.1.318.

    I have poured through the demos and forums and the references to setting line-height inline; none of these solutions work!  I have since found a solution, that is  font-size, if you set the font-size to the desired height the sparkline indeed takes the correct height.  Hopefully this saves someone else wasting hours!  Is this a bug or the intended method of setting the height of a sparkline?

    <!DOCTYPE html>
    <html>
    <head>
        <title>Test</title>
        <script src="scripts/jquery.min.js"></script>
       <!--
        * Kendo UI Complete v2014.1.318 (http://kendoui.com)
        * Copyright 2014 Telerik AD. All rights reserved.
        -->
        <script src="scripts/kendo.all.min.js"></script>
       <!--
        * Kendo UI Complete v2014.1.318 (http://kendoui.com)
        * Copyright 2014 Telerik AD. All rights reserved.
        *
       -->
        <script src="scripts/kendo.dataviz.min.js"></script>
        <style>
            .k-sparkline span{
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <span id="spark"></span>
        <script type="text/javascript">
     
            jQuery(document).ready(function () {
     
                jQuery("#spark").kendoSparkline({
                    type: "column",
                    data: [
                        16, 17, 18, 19, 20, 21, 21, 22, 23, 22,
                        20, 18, 17, 17, 16, 16, 17, 18, 19, 20,
                        21, 22, 23, 25, 24, 24, 22, 22, 23, 22,
                        22, 21, 16, 15, 15, 16, 19, 20, 20, 21
                    ]
                });
     
                 
            });
     
        </script>
    </body>
    </html>

    Regards,
    Nomdeplume
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 21 Mar 2014 Link to this post

    Hi Nomdeplume,

    In order to achieve the expected result you could set height to the <span> element from which the Sparkline is initialized. For your convenience I prepared a simple jsBin example which demonstrates the suggested approach in action.

    Regards,
    Iliana Nikolova
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  3. Kendo UI is VS 2017 Ready
Back to Top