Bar Sparkline that fills div 100%

[Josh]

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*/
    }
});

[Josh]

Nevermind. I was setting the max for value axis incorrectly. It works now. :)

[Josh]

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

[Iliana Dyankova]

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

 

 

[Josh]

You're my hero. :)