This is a migrated thread and some comments may be shown as answers.

Sparkline Height Issues

1 Answer 78 Views
Sparkline
This is a migrated thread and some comments may be shown as answers.
Nomdeplume
Top achievements
Rank 1
Nomdeplume asked on 20 Mar 2014, 05:08 PM
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

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 21 Mar 2014, 02:21 PM
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.

 
Tags
Sparkline
Asked by
Nomdeplume
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or