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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Stacked Bar xAxis Left Align Labels

Thread ID:

Created:

Updated:

Platform:

Replies:

144259 Apr 26,2019 11:06 PM UTC Apr 30,2019 05:49 PM UTC Angular - EJ 2 3
loading
Tags: Chart
jab
Asked On April 26, 2019 11:06 PM UTC

How do I left align the X-Axis Labels on a Stacked Bar Chart?
I've tried:
primaryXAxis:{labelStyle:{textAlignment:'Left', size:'18px', fontWeight:'bold'}, valueType:'Category'}
and has no effect.

TIA,
Josh

Baby Palanidurai [Syncfusion]
Replied On April 29, 2019 06:23 AM UTC

Hi Jab, 

Greetings from Syncfusion. 

We have analyzed your query. As of now, we are not having left text alignment for axis. But as a workaround, we can achieve your requirement by using annotations feature. We have prepared a sample based on your requirement. In that sample, we have moved the chart margin to 60px and disable the axis labels. Then we have added the custom text using annotations. For more information about annotations, kindly find the below documentation link, 

Code snippet:   
<ejs-chart style='display:block;' align='center' id='chartcontainer' [margin]='margin' 
        [primaryXAxis]='primaryXAxis'> 
        <e-annotations> 
          <e-annotation content="<div>Jan</div>" x=20 y=350 coordinateUnits='Pixel'></e-annotation> 
          <e-annotation content="<div>Feb</div>" x=20 y=250 coordinateUnits='Pixel'></e-annotation> 
          <e-annotation content="<div>Mar</div>" x=20 y=150 coordinateUnits='Pixel'></e-annotation> 
          <e-annotation content="<div>Apr</div>" x=20 y=50 coordinateUnits='Pixel'></e-annotation> 
          </e-annotations> 
</ejs-chart> 



public primaryXAxis: Object = { 
    valueType: 'Category', 
    labelStyle: {  
      size: '0px' // disable the axis labels 
    }, 
  }; 
  public margin: Object = { 
    left: 60  
  }; 

Screenshot: 
 


Kindly revert us, if you have any concerns. 

Regards, 
Baby. 


jab
Replied On April 29, 2019 02:09 PM UTC

Thanks for your reply.  

The workaround has static label text and positioning.  Can you suggest a way to make this dynamic? 

The label text is in the data and placement needs to be relative to the respective bar.  

I'm open to any suggestions including CSS or post-render hacks -as I;ve spent way too much time on this simple requirement at this point.

Thanks. 
Josh

Baby Palanidurai [Syncfusion]
Replied On April 30, 2019 05:49 PM UTC

Hi Jab, 

We have analyzed your query. We can achieve your requirement by annotation coordinates as points. When using coordinates as points, annotations will render based on the points. Based on your requirement we have prepared a sample. In that sample, we have initially added annotations with axis minimum y value for annotations y and some dummy value for x. Then, we have set the points x for annotations x in the charts load event. Then we have change the annotation positions in the annotationRender event. 

Please find the below code snippet to achieve this requirement, 

ejs-chart (annotationRender)='annotationRender($event)' (load)='load($event)'> 
        <e-annotations> 
          <e-annotation content="<div>Jan</div>" x='xx' y=-10 coordinateUnits='Point'></e-annotation> 
          <e-annotation content="<div>Feb</div>" x='xx' y=-10 coordinateUnits='Point'></e-annotation> 
          <e-annotation content="<div>Mar</div>" x='xx' y=-10 coordinateUnits='Point'></e-annotation> 
          <e-annotation content="<div>Apr</div>" x='xx' y=-10 coordinateUnits='Point'></e-annotation> 
          </e-annotations> 
        </ejs-chart> 


public load(args) { 
    let dataSource = args.chart.series[0].dataSource; 
    for (let i: number = 0; i < dataSource.length; i++) { 
      args.chart.annotations[i].x = dataSource[i].x; 
    } 
  } 
  public annotationRender(args) { 
     args.location.x -= 50; 
  } 



Kindly revert us, if you have any concerns. 

Baby. 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon