Kendo Charts inconsistent width

Question

I have several individual charts, and have disabled all the axi (axises?) so that I can have a simple stacked bar in each cell of a table:

http://jsfiddle.net/hCb8C/3/

According to this forum, the chart should adopt the width of its parent element. I've tried setting both an explicit width and 100% on the chart, and wrapped each chart in a div with an explicit width. However, from the fiddle if you scroll to the third column Test you can see the widths vary, and it looks really sloppy. I would like to just set an explicit fixed number of pixels for the chart. Eventually I'm going to calculate a width for each based on highest relative Total so they are scaled properly. However before I get that far, I need to at least get them to respect the width setting.

How can I get all of the charts to respect the width setting?

$(function(){

     $(".chart").each(function (index) {
            var current = $(this)
            var chart = current.kendoChart({                   
                title: {
                    text: "Compliance",
                    visible: false
                },
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "bar",
                    stack: true,
                    gap: 0
                },
                series: [
                    {
                        name: "Compliant",
                        data: [current.data("compliant-count")],
                        color: "#00ff00",
                        tooltip: {
                            background: '#88ff88'
                        }
                    },
                    {
                        name: "Incomplete",
                        data: [current.data("incomplete-count")],
                        color: "#cccccc",
                        tooltip: {
                            background: '#e7e7e7'
                        }
                    },
                    {
                        name: "Non-compliant",
                        data: [current.data("noncompliant-count")],
                        color: "#ff0000",
                        tooltip: {
                            background: '#ff8888'
                        }
                    }
                ],
                valueAxis: {
                    visible: false,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: false
                    },
                    majorGridLines: {
                        visible: false
                    }
                },
                categoryAxis: {
                    visible: false,
                    minorGridLines: {
                        visible: false
                    },
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    template: "<b>#= value #</b> <br /> #= series.name #"
                }
            }).data("kendoChart");

            chart._tooltip.options.animation.duration = 0;//disable stupid tooltip animations

        });//foreach chart
 });

HTML:

<div class="pivot-container">
<table class="table table-bordered table-condensed table-striped">
<thead>
    <tr>
        <th class="rowLabel"></th>
        <th class="th-md"><b>test category</b>
        </th>
        <th class="th-md"><b>Sprint 48</b>
        </th>
        <th class="th-md"><b>Test</b>
        </th>

    </tr>
</thead>
<tbody>
    <tr class="learnerGroupRow" data-group-member-id="28">
        <td  class="rowLabel"><b>Corporate</b>
        </td>
        <td  class="td-md">
            <div style="width:220px">
                <div class="chart" data-compliant-count="1" data-incomplete-count="0" data-noncompliant-count="2" data-total="3"></div>
            </div>
        </td>
        <td></td>
        <td  class="td-md">
            <div style="width:220px">
                <div class="chart" data-compliant-count="4" data-incomplete-count="2" data-noncompliant-count="9" data-total="15"></div>
            </div>
        </td>

    </tr>
    <tr class="learnerGroupRow" data-group-member-id="7">
        <td  class="rowLabel"><b>
    Dave Test Group 1                       
</b>
        </td>
        <td  class="td-md">
            <div style="width:220px">
                <div class="chart" data-compliant-count="0" data-incomplete-count="0" data-noncompliant-count="3" data-total="3"></div>
            </div>
        </td>
        <td  class="td-md">
            <div style="width:220px">
                <div class="chart" data-compliant-count="1" data-incomplete-count="0" data-noncompliant-count="2" data-total="3"></div>
            </div>
        </td>
        <td  class="td-md">
            <div style="width:220px">
                <div class="chart" data-compliant-count="0" data-incomplete-count="3" data-noncompliant-count="14" data-total="17"></div>
            </div>
        </td>

    </tr>            
    <tr class="learnerGroupRow" data-group-member-id="970">
        <td  class="rowLabel"><b>
    Managed                       
</b>
        </td>
        <td  class="td-md">
            <div style="width:220px">
                <div class="chart" data-compliant-count="0" data-incomplete-count="0" data-noncompliant-count="3" data-total="3"></div>
            </div>
        </td>
        <td></td>
        <td  class="td-md">
            <div style="width:220px">
                <div class="chart" data-compliant-count="0" data-incomplete-count="2" data-noncompliant-count="12" data-total="14"></div>
            </div>
        </td>

    </tr>
    <tr class="learnerGroupRow" data-group-member-id="0">
        <td  class="rowLabel"><b>
    Other                       
</b>
        </td>
        <td  class="td-md">
            <div style="width:220px">
                <div class="chart" data-compliant-count="0" data-incomplete-count="0" data-noncompliant-count="14" data-total="14"></div>
            </div>
        </td>
        <td  class="td-md">
            <div style="width:220px">
                <div class="chart" data-compliant-count="0" data-incomplete-count="0" data-noncompliant-count="1" data-total="1"></div>
            </div>
        </td>
        <td  class="td-md">
            <div style="width:220px">
                <div class="chart" data-compliant-count="0" data-incomplete-count="13" data-noncompliant-count="59" data-total="72"></div>
            </div>
        </td>

    </tr>
</tbody>
</table>
</div>

CSS:

div.pivot-container {
    width: 100%;
    overflow-x: scroll;
    overflow-y: visible;
}
div.pivot-container table {
    border-collapse: separate;
    table-layout: fixed;

}
.pivot-container td {
    padding:2px;
    margin:0px;    
}

.rowLabel {
    width: 230px;

    height:30px;
}
.td-md {
    width: 230px;
        height:30px;
}
.chart {
    width: 100%;
    height:30px;   
}

Answer 1

This line in your css is causing a border on the left side of some of the cells:

border-collapse: separate;

If you remove it the cells will be left aligned.

As for the width, you have 3 series defined. If the values are

14|2|3

12|1|1

Then the top bar will be longer by 5 ticks. I think you are looking for a 100% stacked bar. At least you can probably make an extra series to make up the slack to a shared max like 100%.

Also, if you set the valueAxis property likewise:

valueAxis: {
    visible: false,                       
},

You can see it is drawing to 100% you just don't have any indication on the right.

Answer 2

I figured it out. Even though the valueAxis was hidden, it was still being generated, so a bar of 75 items long would have a value axis with ticks up to 90. I fixed this by explicitely setting the valueAxis max property to whatever the total items was for that stacked bar:

http://jsfiddle.net/hCb8C/4/

valueAxis: {
    max: current.data("total"),
    visible: false,
    line: {
        visible: false
    },
    minorGridLines: {
        visible: false
    },
    majorGridLines: {
        visible: false
    }
},