This is a migrated thread and some comments may be shown as answers.

Sizing horizontal stacked bar plot area to series

1 Answer 39 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 06 Jul 2015, 12:25 AM

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.

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 07 Jul 2015, 10:33 AM
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!
 
Tags
Charts
Asked by
Michael
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or