Sparkline being clipped

2 posts, 0 answers
  1. Robert
    Robert avatar
    37 posts
    Member since:
    Feb 2012

    Posted 01 Apr 2014 Link to this post

    I am raising this in the forums because the support ticket page keeps giving me a 'server had an error' response page.

    I was previously running Kendo version 2013.3.1324. I have been developing a column in the Kendo grid to have a sparkline in it's template.  This was displaying correctly in that version.  I have since upgrade to version 2014.1.318 to attempt to fix an issue we have with the Kendo grid where it freezes (I can explain the details in another support ticket to the Grid team).  Now we have upgraded the sparkline is no longer rendering properly. The top and bottom appear to be clipped.  I have attached a screenshot showing the problem.  I have compared the Html output by both version and something new has been added. It is the svg / defs / clippath / path  element.  It seems the new version puts a path element in the clippath node, removing this in the development tools on chrome fixes the display.
    Why was it added and how can I fix the new version to display correctly.

    I am also using angular-kendo.js. Although I believe this wouldn't affect the html rendered. My sparkline options are: 
                chartArea: {
                    background: "",
                    width: 110
                tooltip: {
                    visible: false,
                categoryAxis: {
                    crosshair: {
                        visible: false,
                seriesDefaults: {
                    line: {
                        color: "#5889AD",
                        width: 1,
                    markers: {
                        visible: true,
                        size: 1,
                        border: {
                            color: "#d52b1e",
                            width: 2,
  2. Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 02 Apr 2014 Link to this post

    Hi Robert,

    Thank you for pointed our attention to this issue - I forwarded it to the developers and we will do our best to address it as soon as possible. As a small sign of gratitude for this finding I updated your points.

    Meanwhile as a workaround I can suggest setting negative min value to the valueAxis. As an example: 
    valueAxis: {
       min: -5

    Iliana Nikolova

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top