search

syncfusion / ej2-angular-ui-components

Syncfusion Angular UI components library offer more than 50+ cross-browser, responsive, and lightweight angular UI controls for building modern web applications.
https://www.syncfusion.com/angular-ui-components
Other
275 stars 114 forks source link

Draw back to back bar chart with Y axis (data label) in middle #210

Closed hasan-enosis closed 2 years ago

hasan-enosis commented 2 years ago

image

We want to draw a chart which looks exactly like above with Y axis (data label) in the middle and bars on both sides. We couldn't find any configuration or axes customization which could help us achieve that. Please let us know if there is a way in Angular Syncfusion to draw the above back to back bar chart exactly as it is.

Arun-Raji commented 2 years ago

Hi @hasan-enosis,

Greetings from Syncfusion.

We can able to achieve your output by using the axis customization with the help of two bar charts with bootstrap column CSS. We have prepared a stackblitz angular sample to replicate your output in the below link and also attached the UG link of axis customization of angular charts.

UG link – https://ej2.syncfusion.com/angular/documentation/chart/axis-customization/

Sample - https://stackblitz.com/edit/angular-xzsh25?file=app.component.html

Output –

Capture

Please let us know if you have any further clarification regarding this.

Thanks, Arun