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

Sparkline Height and Width issues

11 Answers 760 Views

Sparkline

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

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

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:

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.

Accepted

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.

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.