How to set uniform left and right margins for plot area

[Aruna]

Hi,

I'm aiming to set uniform left and right margins in multiple charts. The requirement is to align each chart's vertical axis in a straight vertical line as shown in below.

Sample of my use case : https://stackblitz.com/edit/github-hcmejw-umkeet?file=src%2Fapp.component.ts

Thanks,
Aruna

[Nishanthi Panner Selvam]

Aruna,

We have analyzed your query based on that we suggest you to use the 'margin' property in the chart along with adjusting the 'maximumLabelWidth' within the 'primaryYaxis' property. This will help ensure that all charts align consistently, with the same starting and ending points.

We have attached sample, code-snippet and screenshot for your reference.

Code-snippet:

< ejs - chart #chartRef

         [margin] = "{

               top: chartItem.margin.top,

               bottom: chartItem.margin.bottom,

               right: chartItem.margin.right,

               left: chartItem.margin.left,

                               }"      

         [primaryYAxis] = "{

               maximumLabelWidth: chartItem.PrimaryYAxis.maximumLabelWidth,

               enableTrim: true ,

             }">

</ ejs - chart >

 

datasource.ts

"TemplateSections": [

        {

         

            "Charts": [

                {

                  "margin":{

                      "top" : 10,

                      "left" : 10,

                      "right": 34,

                      "bottom": 10

                    },

             "PrimaryYAxis": {

                        "maximumLabelWidth": 22,

                    },

            }

        }

    ]

Screenshot:

Sample: https://stackblitz.com/edit/github-hcmejw-r427ww?file=src%2Fapp.component.ts

Kindly revert us if you have any concerns.

Regards,

Nishanthi