Sparkline Height and Width issues

[Chris]

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!

[Hristo Germanov]

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

[Chris]

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.

[Iliana Dyankova]

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

 

 

[Chris]

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.

[Iliana Dyankova]

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

 

 

[Chris]

Thanks Iliana. I thought I had tried that, but it works now.

[Per]

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.

[Bozhidar]

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

[Per]

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 ?

 

[Bozhidar]

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

[Per]

Perfekt!

Thank you :)