Nomdeplume
Top achievements
Rank 1
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?
Regards,
Nomdeplume
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
0
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
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.