Sparkline Height and Width issues

7 posts, 1 answers
  1. Chris
    Chris avatar
    20 posts
    Member since:
    Nov 2013

    Posted 19 Dec 2013 Link to this post

    Hi,
    I am having trouble setting the height and width of a sparkline.

    Simplified code:
    @{
            if (Model.IsTrue) <-- boolean
            {
                var readUrl = Url.Action("Action", "Controller", new { id= Model.ID});
                @(Html.Kendo().Sparkline()
                    .Name("sparkline-risk-score")
                    .HtmlAttributes(new { style = "width: 500px; height:400px;" })
                    .ChartArea(ca => ca.Background(""))
                    .DataSource(ds => ds.Read(read => read.Url(readUrl)))
                    .Series(series => series.Line("Risk Score").Color("#C0504D"))
                )
            }
        }

    Data from controller method:
    [0.5570,0.5570,0.5570,0.5570,0.5570,0.5570,0.5570,0.5570,0.5570]

    Output:
    http://i.imgur.com/VvpU8Vx.png

    Hopefully I'm not missing something really obvious.
    Thanks!
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 23 Dec 2013 Link to this post

    Hi Chris,

    The height of the sparkline will be changed with line-height instead of height. But I am not sure why the width is an issue.
    This is my test code and it works correctly:
    .HtmlAttributes(new { style = "width: 20px; line-height:400px;" })


    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. Kendo UI is VS 2017 Ready
  4. Chris
    Chris avatar
    20 posts
    Member since:
    Nov 2013

    Posted 26 Feb in reply to Hristo Germanov Link to this post

    Hi Hristo,

    I have come back to this some time later with a separate requirement to use a sparkline.  It is new code from the above but has the same issue.

    The documentation says the default Chart Area width and height are 600 and 400.

    However, if I don't set them within the sparkline configuration, they seem to default to 84x16px. I cannot see any code or styling that would do this. 

    I would like the width to be 100% of the container its in (in this case a table within a Kendo Splitter).

    The code for the chart is simple, i.e.

        $("#" + chartPlaceHolderID).kendoSparkline({
            data: chartModel.SparklineData
        });

    The sparkline is rendered as follows:

    <span id="Chart5" class="k-sparkline" data-role="sparkline" style="position: relative;"><span data-role="surface" style="width: 84px; height: 16px;"><svg style="width: 100%; height: 100%; overflow: hidden; left: -0.078125px; top: 0px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs></defs><g><path d="M0 0 L 84 0 84 16 0 16Z" stroke="none" fill="#fff"></path><path d="M2 2 L 81 2 81 13 2 13Z" stroke="none" fill="#fff" fill-opacity="0"></path><g><g></g><g></g><g><path style="display: none;" d="M78.531 2 L 78.531 13" stroke="#8e8e8e" stroke-width="1" fill="none"></path></g><g></g><g><g><path d="M4.469 9.857 L 9.406 13 14.344 13 19.281 9.857 24.219 13 29.156 13 34.094 13 39.031 13 43.969 13 48.906 13 53.844 3.571 58.781 13 63.719 9.857 68.656 9.857 73.594 9.857 78.531 9.857" stroke="#ff6800" stroke-width="0.5" fill="none"></path></g></g></g><g></g></g></svg></span></span>

    I am using the latest build - 2016.1.112.

    Do you have any ideas why its coming out as 84x16? Is there a way to set it to 100%?

    Thanks,

    Chris.

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 01 Mar Link to this post

    Hi Chris,

    Apologies for the delayed reply. 

    In order to achieve the expected result you should set width before initializing the chart. For your convenience here is a basic dojo.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Chris
    Chris avatar
    20 posts
    Member since:
    Nov 2013

    Posted 01 Mar in reply to Iliana Nikolova Link to this post

    Thanks Iliana.

    It looks like you mean set the width of the containing element.  That is set dynamically by virtue of proportions within a Kendo Splitter which is within a nested Bootstrap column.

    So I'm not sure how I would do this in that context.

    Chris.

  7. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 03 Mar Link to this post

    Hi Chris,

    When setting width: 100% to the Sparklines they will take the full width available. Take a look at this dojo which demonstrates Kendo UI Sparklines within a Bootstrap columns.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Chris
    Chris avatar
    20 posts
    Member since:
    Nov 2013

    Posted 03 Mar in reply to Iliana Nikolova Link to this post

    Thanks Iliana. I thought I had tried that, but it works now.
Back to Top
Kendo UI is VS 2017 Ready