Sparkline Height and Width issues

12 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. Chris
    Chris avatar
    20 posts
    Member since:
    Nov 2013

    Posted 26 Feb 2016 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.

  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2606 posts

    Posted 01 Mar 2016 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!
     
  5. Chris
    Chris avatar
    20 posts
    Member since:
    Nov 2013

    Posted 01 Mar 2016 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.

  6. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2606 posts

    Posted 03 Mar 2016 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!
     
  7. Chris
    Chris avatar
    20 posts
    Member since:
    Nov 2013

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

    Thanks Iliana. I thought I had tried that, but it works now.
  8. Per
    Per avatar
    120 posts
    Member since:
    Jan 2008

    Posted 23 Dec 2016 in reply to Iliana Nikolova Link to this post

    Hi

    Why is there a left and right margin on the line sparkline but not at the area sparkline, in your example?

    I'm struggling to get rid of the left and right margin in the line sparkline but cannot find how to do this.

  9. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 27 Dec 2016 Link to this post

    Hello,

    I am not sure about which margins you are pointing, but in the latest dojo example, there is a margin around the Sparkline because of the body default margins coming from the default browser CSS styles.

    In order to remove it, you should specify it explicitly in your CSS. A sample dojo is prepared: http://dojo.telerik.com/@ruzhenov/IWAho

    The necessary styles are in the head part of the example:

    html, body {
           margin: 0;
         }


    Regards,
    Bozhidar
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Per
    Per avatar
    120 posts
    Member since:
    Jan 2008

    Posted 27 Dec 2016 in reply to Bozhidar Link to this post

    Hi

    Your example shows the problems.
    If you look at the top most sparkline (the line model) it has a 5 px left and right margin, compared to the "area" sparkline.
    I want the "line" sparkline to be as wide as the "area" sparkline.
    My customer is complaining that they not of the same width and want's me to fix it.
    I consider this to be a bug but maybe there is a work around for it ?

     

  11. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 27 Dec 2016 Link to this post

    Hi,

    I see now what you mean.

    Here is a different dojo example showing the equal sparklines: http://dojo.telerik.com/@ruzhenov/agaXE

    ​Here is the documentation about justified: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.justified

    ​If set to true the chart will position categories and series points on major ticks. This removes the empty space before and after the series.

    Regards,

    Bozhidar
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  12. Per
    Per avatar
    120 posts
    Member since:
    Jan 2008

    Posted 07 Jan in reply to Bozhidar Link to this post

    Perfekt!

    Thank you :)

Back to Top