SparkLines In Chrome Can't Set Width

[Jeffry]

Using Kendo MVC 2014.1.318.440

I am trying to use sparklines for charting purposes, but I need to set the width of them. In Firefox and IE setting the width works fine, but in chrome I can't figure out why the same code isn't working.

Attached images.

Code:
@(Html.Kendo().Sparkline()
                                .Name("temp-range")
                                .Type(SparklineType.Bullet).SeriesColors("#ffb401")
                                .ChartArea(ca => ca.Background("#f6f6f6"))
                                .ValueAxis(axis => axis
                                .Numeric()
                                .Min(0)
                                .Labels(labels =>
                                labels.Background("#ffb401"))
                                .Max(100)
                                .Line(line => line.Visible(false)
                                ).Color("#ffb401")
                                )
                                .Tooltip(tooltip => tooltip
                                .Visible(false)
                                )
                                .HtmlAttributes(new { style = "width: 20px" })
                                .Data(new double[] { ViewBag.leftPanel["Score"], ViewBag.leftPanel["benchmark"] }))

[T. Tsonev]

Hello,

I've prepared a very simple demo, but the width appears to be correct in Chrome.

Perhaps styles on the page are interfering with your settings.
You can use the browser inspector to look out for such styles.

Is the sparkline visible initially? Perhaps the container is getting resized after the initialization.

Regards,
T. Tsonev
Telerik

 

 

[Jeffry]

I am not creating the sparklines by appending them with script like your example. I am using mvc, you can see the syntax example I gave.

I have the sparkline wrapped in an LI container so the code for the view would be :

<li>
{code from above}
</li>

Even if i set the width inline on the LI it doesn't work in chrome. The html generated for it is  the following

<li class="list-image" style="width: 20px;">
<span class="k-sparkline" id="temp-range" style="width: 20px; position: relative;" data-role="sparkline">
<span style="width:150px; height: 18px;">
{rest of code}
</li>




I am not sure where the width: 150 is coming from but I assume that is what is causing the issue.

[Jeffry]

Also I do not see why this code would render correctly and generate the right output on one browser but not another

[T. Tsonev]

Hi,

The 150px width is the actual width that the sparkline measured during initialization. It might be set from CSS styles on the page. The browser inspector might be of help.

Let me suggest an alternative approach:
@(Html.Kendo().Sparkline()
  .ChartArea(chartArea => chartArea.Width(20).Height(18))
  // ...
)

I hope this will be sufficient to override the page styles.

Regards,
T. Tsonev
Telerik