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

Bar Sparkline that fills div 100%

4 Answers 101 Views
Sparkline
This is a migrated thread and some comments may be shown as answers.
Josh
Top achievements
Rank 1
Josh asked on 22 May 2014, 01:46 AM
I'm trying to find the right settings to get a Bar Sparkline to fill a div with just the bar image and no padding, white space or anything else around it. I've set the following, which gets close, but clips some of the image. Is there a way to do this?

<div id="files-format-chart" style="width:1120px;line-height:30px;cursor: pointer;"></div>

$("#files-format-chart").kendoSparkline({
    type: "bar",
    chartArea: {
        opacity: 0,
        margin: 0
    },
    plotArea: {
        opacity: 0,
        margin: 0
    },
    series: /*array of series*/,
    valueAxis: {
        max: /*max value of series data to avoid space*/
    }
});




4 Answers, 1 is accepted

Sort by
0
Josh
Top achievements
Rank 1
answered on 22 May 2014, 03:38 PM
Nevermind. I was setting the max for value axis incorrectly. It works now. :)
0
Josh
Top achievements
Rank 1
answered on 27 May 2014, 03:49 PM
Sorry, I take it back. I'm not able to find a way to get rid of all the whitespace around the bar of a sparkline. See the red circled space in the attached screenshot - this is the space I'm trying to get rid of.

Here's the example
0
Accepted
Iliana Nikolova
Telerik team
answered on 28 May 2014, 03:19 PM
Hi Josh,

In order to achieve the expected result you should set gap / spacing options to 0
$(".bar-benefits", row).kendoSparkline({
  //....
  series: [{
     //....
     gap: 0,
     spacing: 0
  }],
});

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Josh
Top achievements
Rank 1
answered on 28 May 2014, 04:23 PM
You're my hero. :)
Tags
Sparkline
Asked by
Josh
Top achievements
Rank 1
Answers by
Josh
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Share this question
or