How to align ngx charts created using ngfor

Question

I want to align the ngx-charts component :

Using ngFor on an array, I give the data to create charts, I am able to generate three charts, but I want to align them one in top left corner, one at bottom right and one at bottom left corner.

HTML :

<div *ngFor="let spaceval of dataSourceTesting" style="text-align:center;" margin="5% auto">
        
    <form>
        <mat-toolbar  class="NavToolClass" >
            <span> {{spaceval.value}}</span>
        </mat-toolbar>
        <ngx-charts-line-chart 
            [results]="spaceval.key"
            [gradient]="verticalBarOptions.gradient"
            [xAxis]="verticalBarOptions.showXAxis"
            [yAxis]="verticalBarOptions.showYAxis"
            [legend]="false"
            [showXAxisLabel]="verticalBarOptions.showXAxisLabel"
            [showYAxisLabel]="verticalBarOptions.showYAxisLabel"
            [xAxisLabel]="verticalBarOptions.xAxisLabel"
            [yAxisLabel]="verticalBarOptions.yAxisLabel"
            [showGridLines]="verticalBarOptions.showGridLines"
            [view]="view"
            [legend]="verticalBarOptions.showLegend"
            [yScaleMax]="1200">
        </ngx-charts-line-chart>
    </form>
</div>

Welcome ! Could you edit your questions with more details, like what you've already tried ? — l -_- l, Jul 05 '22 at 09:54
the above image is the code which I have implemented, but I am not able to find which feature i can use to align the graph — RonKing, Jul 05 '22 at 10:00
Great, I'll take a look at your code. Sorry to bother but it's [better to post code than images on this site](//meta.stackoverflow.com/q/285551). — l -_- l, Jul 05 '22 at 10:01

score 0 · Answer 1 · answered Jul 05 '22 at 11:27

0

Absolute positioning + index of elements

You can manipulate the ngx-charts-line like a regular HTML element. Since you're using an ngFor, I would suggest using the index of elements to position them absolutely like so :

<div class="wrapper" style="display: flex; height: 100%">
  <div class="graph-elem"
    style="width: 400px; position: absolute"
    *ngFor="let graph of graphs; let i = index"
    [class.bottom]="i > 1"
    [class.right]="i % 2 === 0">
    <ngx-charts-line-chart ...your properties></ngx-charts-line-chart>
  </div>
</div>

Here is a working MCVE : StackBlitz

answered Jul 05 '22 at 11:27

l -_- l

618
4
15

thanks for the suggestion as of now I have taken care of the alignment using mat grid list, But the only issue I am facing is that when I am trying to zoom in the page, each mat grid is zooming in instead of the whole page, is there any solution for this ? – RonKing Jul 27 '22 at 04:45
I am facing an issue, where I have created a mat grid list , and when i try to zoom the page using mouse scroll, instead of zooming of whole page, the grid is getting zoom, I want to make the grid to be fixed and make the page to zoom in – RonKing Jul 27 '22 at 04:46
@RonKing please provide a stackblitz, i cannot guess your code – l -_- l Jul 27 '22 at 06:59
[link](https://stackoverflow.com/questions/73699305/how-to-apply-spacing-between-chart-and-the-label-in-ngx-line-chart) Can any one help in this issue – RonKing Sep 13 '22 at 08:55

How to align ngx charts created using ngfor

1 Answers1

Absolute positioning + index of elements