We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

bar chart question

Thread ID:





130293 May 4,2017 10:49 AM May 5,2017 08:41 AM ASP.NET MVC 1
Tags: Chart
Miranda Johnson
Asked On May 4, 2017 10:49 AM

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>

Dharanidharan Dharmasivam [Syncfusion]
Replied On May 5, 2017 08:41 AM

Hi Miranda, 

Thanks for using Syncfusion product.  

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. 
      .PrimaryXAxis(px => px.EnableTrim(true).MaximumLabelWidth(50)) 

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. 
       .Series(sr => 


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. 


function chartLoad(sender) { 
        //Reverse the datasource 
        sender.model.series[0].dataSource = chartData; 
        sender.model.series[0].xName = "QuestionText"; 
        sender.model.series[0].yName = "AverageAnswer"; 

Sample for reference can be find from below link. 



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.