spacing with stacked bar doesn't seem to have any effect

[Anker Berg-Sonne]

I want to create a stacked bar chart with no spacing between the bars. It doesn't appear that spacing has any effect on this.

Here is my chart definition:

                      {
                        dataSource:
                          {
                            transport:
                              {
                                read:
                                  {
                                    url: "JSONComfort.aspx?t=" + SessionToken + "&c=" + ClientID + "&s=" + Space,
                                    dataType: "json"
                                  }
                              },
                            sort:
                              {
                                field: "Temperature",
                                dir: "asc"
                              }
                          },
                        title:
                          {
                            text: "Comfort Feedback"
                          },
                        valueAxis:
                          {
                            min: 0,
                            max: 100
                          },
                        chartArea:
                          {
                            background: "#E9E9EB"
                          },
                        seriesDefaults:
                          {
                            spacing: 0,
                            stack: true
                          },
                        series:
                          [
                            {
                              field: "Cold",
                              name: "Cold",
                              color: "blue"
                            },
                            {
                              field: "Cool",
                              name: "Cool",
                              color: "lightblue"
                            },
                            {
                              field: "Comfortable",
                              name: "Comfortable",
                              color: "green"
                            },
                            {
                              field: "Warm",
                              name: "Warm",
                              color: "orange"
                            },
                            {
                              field: "Hot",
                              name: "Hot",
                              color: "red"
                            }
                          ],
                        categoryAxis:
                            {
                              field: "Temperature",
                              labels:
                                {
                                  step: 2
                                }
                            }
                      }

Thanks/Anker

[Iliana Dyankova]

Hi Anker,

You could control the distance between the category clusters in Kendo UI Bar Chart through the gap property of the series. In case you would like to remove the spacing between the bars you could set this property to 0. For example:

function createChart() {
  $("#chart").kendoChart({
     ...
       series: [{
             name: "MySeries",
             data: [4, 2, 8, 5, 6],
             gap: 0
       }
     ...
  });
}

  
Regards,
Iliana Nikolova
the Telerik team

[Anker Berg-Sonne]

Thanks,

I tried adding gap:0 and it had no effect. The attached file shows the chart display. The new definition is:

      $("#ComfortChart").kendoChart(
        {
          dataSource:
            {
              data: ComfortWindowData
            },
          title:
            {
              text: "Comfort Feedback"
            },
          valueAxis:
            [
              {
                name: "percentage",
                min: 0,
                max: 100
              },
              {
                name: "count"
              }
            ],
          chartArea:
            {
              background: "#E9E9EB"
            },
          seriesDefaults:
            {
              spacing: 0,
              stack: true,
              axis: "percentage"
            },
          series:
            [
              {
                field: "Cold",
                name: "Cold",
                color: "blue",
                gap: 0
              },
              {
                field: "Cool",
                name: "Cool",
                color: "lightblue",
                gap: 0
              },
              {
                field: "Comfortable",
                name: "Comfortable",
                color: "green",
                gap: 0
              },
              {
                field: "Warm",
                name: "Warm",
                color: "orange",
                gap: 0
              },
              {
                field: "Hot",
                name: "Hot",
                color: "red",
                gap: 0
              },
              {
                field: "Count",
                name: "Count",
                color: "black",
                axis: "count",
                type: "line",
                markers: "false",
                width: 2
              }
            ],
          categoryAxis:
              {
                field: "Temperature",
                labels:
                  {
                    step: 2
                  }
              }
        }
      );

[Iliana Dyankova]

Hello Anker,

I tried to reproduce your scenario and everything works as expected. I used the details from your application to create a jsFiddle example, which is available here. Please check it and let me know if I missed something.

 

Regards,
Iliana Nikolova
the Telerik team

[Anker Berg-Sonne]

I wonder whether we are using the same version, or whether the order of loading JavaScript libraries is causing the issue. I cut and pasted your definitions into my program and there's still a gap!

I used the custom download builder tool and checked everything. The version it was built from was v2012.1.322. My loading sequence is:

    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.custom.min.js" type="text/javascript"></script>
    <script src="js/Cookies.js" type="text/javascript"></script>
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />

Anker

[Iliana Dyankova]

Hello Anker,

I am not sure what may cause such behavior. Could you please provide the result scripts sequence from the Custom Download builder? 

 
Regards,
Iliana Nikolova
the Telerik team

[Anker Berg-Sonne]

Here it is.

Thanks/Anker

[Iliana Dyankova]

Hi Anker,

I tried to reproduce this issue locally, but to no avail. Could you please provide a simple runnable project which reproduces the depicted issue? This way I will be able to observe the problem and advice you further.

For convenience, I also attached my test project and made a screencast from my test.

Kind regards,
Iliana Nikolova
the Telerik team