bar chart question

[Miranda Johnson]

for the Y - Axis data I am entering variable length strings of text.  This info is pulled from my database.  Is it possible to have when the string is long to wrap to another line so that the left side of the chart is not so big?     

also for each of the individual bars.  How do i change the height of each bar?   not the height of the parent container but the height of each bar 

is it possible to build from top down instead from bottom up?

here is an example of pone of the charts.

<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2">
   <div id="chartContainer" data-role="ejchart" data-ej-palette='["#008000"]' data-ej-series='[{"dataSource":ej.isJSON([{"QuestionText":"I would refer a friend to work here.","AverageAnswer":4.67},{"QuestionText":"I look forward to coming to work every day.","AverageAnswer":4.67},{"QuestionText":"Big Tex Bank encourages and supports a healthy lifestyle, and work/life balance.","AverageAnswer":4.33},{"QuestionText":"I consider Big Tex Bank to be diverse, reflecting different ages, ethnicities, and backgrounds. ","AverageAnswer":4.33}]),"xName":"QuestionText","yName":"AverageAnswer"}]' data-ej-commonseriesoptions-type='bar' data-ej-primaryxaxis-labelintersectaction='none' data-ej-primaryyaxis-orientation='vertical' data-ej-primaryyaxis-labelintersectaction='none' data-ej-primaryyaxis-range-min='0' data-ej-primaryyaxis-range-max='5' data-ej-primaryyaxis-range-interval='1' data-ej-size-width='80%' data-ej-size-height='250' data-ej-isresponsive='true' data-ej-enable3d='false' data-ej-legend-visible='false' ></div>
</div>

[Dharanidharan Dharmasivam]

Hi Miranda, 

Thanks for using Syncfusion product.  

Query	Response
Is it possible to have when the string is long to wrap to another line so that the left side of the chart is not so big?	Currently we didn’t provide wrap option for y axis labels in bar chart. Since while wrapping the text, the wrapped text will get overlapped with next axis label. But we have provided support to trim the label, when the label width exceeds  the specified width and tooltip will be displayed for trimmed label while hovering over the label.   This can be achieved by specifying true to EnableTrim and specify the desired labels width to MaximumLabelWidth of PrimaryXAxis property. Find the code snippet to achieve your requirement.      ASP.NET MVC:  @(Html.EJ().Chart("container")        .PrimaryXAxis(px => px.EnableTrim(true).MaximumLabelWidth(50))        //...  )      Screenshot:
How do i change the height of each bar?	Since you are using the bar series type, you can able to change the height of the bar by using ColumnWidth property in the series. By default, the value will be 0.7 and it ranges from 0 to 1. You can specify the height for bar chart between the specified ranges. Also you can specify the spacings between each bar by using ColumnSpacing of series property. Find the code snippet for changing the bar height below.    ASP.NET MVC:    @(Html.EJ().Chart("container")         .Series(sr =>                    {                        sr.ColumnWidth(0.5).Add();                      })         //...  )    Screenshot:
is it possible to build from top down instead from bottom up?	Yes, your requirement can be achieved as workaround in load event of chart by reversing the dataSource. So that your requirement can be achieved. Find the code snippet below.  ASP.NET MVC:    @(Html.EJ().Chart("container")                  //...                  .Load("chartLoad")  )  function chartLoad(sender) {          //Reverse the datasource          chartData.reverse();          sender.model.series[0].dataSource = chartData;          sender.model.series[0].xName = "QuestionText";          sender.model.series[0].yName = "AverageAnswer";      }  Screenshot:    Sample for reference can be find from below link.  https://www.syncfusion.com/downloads/support/forum/130293/ze/sample98958029

Thanks, 

Dharani.