sparkline chart height not set and also axis not displayed

[Tushar]

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 ?

[Hristo Germanov]

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

[Tushar]

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.

[Hristo Germanov]

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

[Tushar]

Hello Hristo Germanov,
Thank you for your kind support.
Please have a look at my sample application in MVC

[Iliana Dyankova]

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

[Nic]

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.

[Nic]

Please ignore my previous post, I overlooked the Height property on ChartArea.

[Goutham]

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

[Nikolay]

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:

• https://www.telerik.com/forums/chart-height

Regards,
Nikolay
Progress Telerik

,