SparkLines In Chrome Can't Set Width

5 posts, 0 answers
  1. Jeffry
    Jeffry avatar
    20 posts
    Member since:
    Jun 2013

    Posted 11 Jul 2014 Link to this post

    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"] }))
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 15 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Jeffry
    Jeffry avatar
    20 posts
    Member since:
    Jun 2013

    Posted 22 Jul 2014 in reply to T. Tsonev Link to this post

    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.
  5. Jeffry
    Jeffry avatar
    20 posts
    Member since:
    Jun 2013

    Posted 22 Jul 2014 in reply to Jeffry Link to this post

    Also I do not see why this code would render correctly and generate the right output on one browser but not another
  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 24 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready