sparkline chart height not set and also axis not displayed

8 posts, 0 answers
  1. Tushar
    Tushar avatar
    4 posts
    Member since:
    May 2013

    Posted 26 Jul 2013 Link to this post

    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 ?
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 26 Jul 2013 Link to this post

    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!
  3. Tushar
    Tushar avatar
    4 posts
    Member since:
    May 2013

    Posted 26 Jul 2013 Link to this post

    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.
  4. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 26 Jul 2013 Link to this post

    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!
  5. Tushar
    Tushar avatar
    4 posts
    Member since:
    May 2013

    Posted 01 Aug 2013 Link to this post

    Hello Hristo Germanov,
    Thank you for your kind support.
    Please have a look at my sample application in MVC
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Aug 2013 Link to this post

    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!
  7. Nic
    Nic avatar
    5 posts
    Member since:
    Jun 2010

    Posted 16 May 2014 Link to this post

    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.


  8. Nic
    Nic avatar
    5 posts
    Member since:
    Jun 2010

    Posted 16 May 2014 in reply to Nic Link to this post

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