Sizing horizontal stacked bar plot area to series

2 posts, 0 answers
  1. Michael
    Michael  avatar
    1 posts
    Member since:
    Dec 2013

    Posted 05 Jul 2015 Link to this post

    Hi all,

     I'm finding the JS Kendo UI pretty great thus far, but I'm having an issue with some sizing of a horizontal stacked bar. Basically I'd like the complete displayed area to only be as big as the value of the series, with no space shown around the 1st series (chart will only ever have one series, being used as a linear gauge more or less).

     Code I have thus far for the init:

     

      $("#chart").kendoChart({
                          chartArea:{
                              height:40,
                              width:200,
                              margin:5,
                              background:"green",
                              margin:0
                          },
                          title: {
                              text: ""
                          },
                          legend: {
                              visible: false
                          },
                          seriesDefaults: {
                              type: "bar",
                              stack: true,
                              margin:15,
                              gap:2
                          },
                          panes:[
                              {name: "top-pane",height:70}
                          ],
                          series: [{
                              name: "Red Portion",
                              data: [10],
                              color: "#ff0000"
                          }, {
                              name: "Yellow Portion",
                              data: [25],
                              color: "#ffff00"
                          }, {
                              name: "Green Portion",
                              data: [100],
                              color: "#00ff00"
                          }],
                          labels:{
                            visible:true
                          },
                          valueAxis: {
                              max: 180,
                              line: {
                                  visible: false
                              },
                              minorGridLines: {
                                  visible: false
                              },
                              majorGridLines:{
                                  visible: false
                              },
                              labels:{
                                  visible:false
                              }
                          },
                          categoryAxis: {
                              majorGridLines: {
                                  visible: false
                              },
                              labels:{
                                  visible:false
                              },
                              visible:false
                          },
                          tooltip: {
                              visible: true

                          }
                      });

     

    The above results in pretty much what I want in terms of one series represented as one stacked horizontal bar, but there's still some extra space around it which I'd like to eliminate so the eventual SVG renders as just the series bar itself.

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 07 Jul 2015 Link to this post

    Hi Michael,

    In order to achieve this you should:
    - Set series.gap 0​​;
    - Change the valueAxis.max to 135.
    For your convenience here is the updated example.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top