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

sparkline chart height not set and also axis not displayed

9 Answers 364 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Tushar
Top achievements
Rank 1
Tushar asked on 26 Jul 2013, 09:34 AM
How to set sparkline chart height ?
I have tried too much but unable to set it.
Also how to display x and y axis and labels on it.
One more thing notes.icon is not available for mvc, any alternative for it ?

9 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 26 Jul 2013, 11:06 AM
Hi Tushar,

Could you please examine sparkline help topic and tell me if you have any other questions?

You can set a different configuration to the notes vie: .Notes(notes => notes.Icon(icon => icon.Size(20))

Regards,
Hristo Germanov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tushar
Top achievements
Rank 1
answered on 26 Jul 2013, 01:09 PM
I am using it with MVC and i'm using @HTML.kendo() syntax.
I tried by changing my way you told me to refer the documentation.
But this is the output.
The height of the inner <span> rendered is still 14px.
And ya   .Notes is not shown to me.
0
Hristo Germanov
Telerik team
answered on 26 Jul 2013, 01:20 PM
Hi Tushar,

Could you try to change the line-height to the sparkline via HtmlAttributes()?

I don't know why you can't get the Notes to work. You can examine the configuration of the notes here and here. if that doesn't help you could you give me a sample test project that I can examine and advice you further?

Regards,
Hristo Germanov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tushar
Top achievements
Rank 1
answered on 01 Aug 2013, 08:18 AM
Hello Hristo Germanov,
Thank you for your kind support.
Please have a look at my sample application in MVC
0
Iliana Dyankova
Telerik team
answered on 05 Aug 2013, 06:49 AM
Hi Tushar,

Thank you for the runnable example. I examined it and observed you are using outdated version of Kendo UI (v2013.1.514):

  • We had an issue with the SparkLine height in the used version and it was not possible to configure its height via the configuration options. The good news is that the issue is already addressed and you could set SparkLine height via the HtmlAttributes() method: 
    @(Html.Kendo().Sparkline()
       //....
       HtmlAttributes(new { style = "width: 500px; height:400px;" })
    )
    Another option is using custom CSS:
    <style>
    .k-sparkline span {
        height: 400px;
    }
    </style>
     
  • Notes feature is available in Kendo UI Chart with Q2 2013 official release (v2013.2.716) and it will not work with previous versions. Hence in order to display Notes you should upgrade to the latest official release. 
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nic
Top achievements
Rank 1
answered on 16 May 2014, 08:43 AM
I'm having the same problem as Tushar regarding sparkline height, using v2014.1.415.545.

This is my code, I've tried setting height and line-height using htmlattributes, and I tried using code identical to that of your demo
at http://demos.telerik.com/kendo-ui/dataviz/sparklines/index.html:

<div class="chart-wrapper">
    <div class="spark">
        @(Html.Kendo().Sparkline(Model.IncomeSeries)
                            .Series(series => series
                                .Area("YValue1", "XValue")
                                .Tooltip(false)
                            )
                            .Theme("Black")
                            .Name("incomeSpark")
                            .HtmlAttributes(new { style = "width: 500px; height:400px;" })
                       )
    </div>
</div>

This is the raw html generated:

<span style="width: 500px; height: 16px;">
    <svg style="position: relative; display: inline; left: -0.300003px; top: 0px;" height="16px" width="500px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs id="k10005">
            <path fill="#3d3d3d" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="0" stroke="" d="M0 0 500 0 500 16 0 16 z" style="display: block;">
                <path fill="none" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" stroke-width="0.1" d="M2 2 497 2 497 13 2 13 z" style="display: block;">
                    <path id="k10009" fill="#fff" stroke-opacity="1" fill-opacity="0" stroke-linejoin="round" stroke-linecap="square" stroke="" d="M2 2 497 2 497 13 2 13 z" data-model-id="k10010" style="display: block;">
                        <g id="k10011">
    </svg>
</span>


And the attached image is a screenshot of the resulting sparkline chart

I'm using mvc 5 with razor.


0
Nic
Top achievements
Rank 1
answered on 16 May 2014, 08:54 AM
Please ignore my previous post, I overlooked the Height property on ChartArea.
0
Goutham
Top achievements
Rank 1
Veteran
answered on 06 Jan 2021, 09:48 PM
Hello, I am using react js , please take a look at my screenshots. The height value is not rendering in the webpage at all, I am not sure what value to use. Pls help in this case what value to use
0
Nikolay
Telerik team
answered on 08 Jan 2021, 01:35 PM

Hello Goutham Navee,

This thread is targeted for Kendo Ui for jQuery and to not spoil it with React questions I have created a new thread in the relevant category.

Please expect a reply to your question in the below thread:

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

,
Tags
Charts
Asked by
Tushar
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Tushar
Top achievements
Rank 1
Iliana Dyankova
Telerik team
Nic
Top achievements
Rank 1
Goutham
Top achievements
Rank 1
Veteran
Nikolay
Telerik team
Share this question
or