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

Sparkline Height and Width issues

11 Answers 330 Views
Sparkline
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 19 Dec 2013, 10:28 AM
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!

11 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 23 Dec 2013, 09:41 AM
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!
0
Chris
Top achievements
Rank 1
answered on 26 Feb 2016, 09:34 AM

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.

0
Iliana Nikolova
Telerik team
answered on 01 Mar 2016, 12:28 PM
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!
 
0
Chris
Top achievements
Rank 1
answered on 01 Mar 2016, 01:05 PM

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.

0
Accepted
Iliana Nikolova
Telerik team
answered on 03 Mar 2016, 09:30 AM
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!
 
0
Chris
Top achievements
Rank 1
answered on 03 Mar 2016, 09:59 AM
Thanks Iliana. I thought I had tried that, but it works now.
0
Per
Top achievements
Rank 1
answered on 23 Dec 2016, 03:21 PM

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.

0
Bozhidar
Telerik team
answered on 27 Dec 2016, 09:20 AM
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.
0
Per
Top achievements
Rank 1
answered on 27 Dec 2016, 09:41 AM

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 ?

 

0
Bozhidar
Telerik team
answered on 27 Dec 2016, 12:09 PM
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.
0
Per
Top achievements
Rank 1
answered on 07 Jan 2017, 11:35 AM

Perfekt!

Thank you :)

Tags
Sparkline
Asked by
Chris
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Chris
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Per
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or