kendo chart not plotting all the series in 100% stacked column chart

Question

I am trying to create 100% stacked chart using kendo, I have 5 series in the below example but it is displaying only 2 series as stacked columns. In the image below, we can see 5 legend and only 2 series.

Example:

<script>
    function createChart() {
    var categories = [
         "2016/04/13 20:00",
         "2016/04/13 05:00",
         "2016/04/13 01:00",
         "2016/04/13 10:00",
         "2016/04/13 06:00",
         "2016/04/13 19:00",
         "2016/04/13 03:00",
         "2016/04/13 14:00",
         "2016/04/13 23:00",
         "2016/04/13 04:00"]
    
  var series = [
            { color: "#001400", data: ["2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2"], name: "aa" },
            { color: "#00B400", data: ["3", "3", "3", "3", "3", "3", "3", "3", "3", "3", "3"], name: "bb" },
            { color: "#FFFF00", data: ["4", "4", "4", "4", "4", "4", "4", "4", "4", "4", "4"], name: "cc" },
            { color: "#FF3266", data: ["5", "5", "5", "5", "5", "5", "5", "5", "5", "5", "5"], name: "dd" },
            { color: "#FFB4FF", data: ["6", "6", "6", "6", "6", "6", "6", "6", "6", "6", "6"], name: "ee" }
        ]
      
        $("#chart").kendoChart({
            title: {
                text: "hourly data"
            },
            legend: {
                visible: true,
                position:"bottom"
            },
            seriesDefaults: {
                type: "column",
                stack: {
                    type: "100%"
                }
            },
            series: series,
            valueAxis: {
                line: {
                    visible: true
                },
                minorGridLines: {
                    visible: true
                }
            },
            categoryAxis: {
              labels: { step: 1, rotation: -90 },
                categories: categories,
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        });
    }

    $(document).ready(createChart);
    $(document).bind("kendo:skinChange", createChart);
</script>

Answer 1

The problem is that in your series your data are strings instead of numbers. Change it to:

    var series = [
      { color: "#001400", data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], name: "aa" },
      { color: "#00B400", data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], name: "bb" },
      { color: "#FFFF00", data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4], name: "cc" },
      { color: "#FF3266", data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5], name: "dd" },
      { color: "#FFB4FF", data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], name: "ee" }
    ];

DEMO