Column Chart within Dashboard Layout

[Eden O]

Hello, I'm experiencing an issue with a column chart within a dashboard layout. When I resize a panel to a smaller width, some of the chart columns disappear. How can I prevent this from happening?

https://stackblitz.com/edit/angular-ablash-ugf6eqs8?file=src%2Fmain.ts

On a separate note, I initially tried using ngFor to generate two <e-series> for my columns, which caused the chart to inline-overflow the panel. Separating them into two distinct <e-series> elements resolved this.

[Durga Gopalakrishnan]

Hi Eden,

Thanks for using Syncfusion products.

Query 1 : When I resize a panel to a smaller width, some of the chart columns disappear. How can I prevent this from happening?

This issue occurs because the chart does not automatically re-render when resizing the dashboard layout panel, which results in columns disappearing. To resolve this, we recommend re-rendering the chart using the refresh method inside the resizeStop event of the dashboard layout. Please refer to the snippet below.

app.component.html

<ejs-dashboardlayout (resizeStop)='onResizeStop($event)'></ejs-dashboardlayout>

 

app.component.ts

export class AppComponent {

  @ViewChild('chart')

  public chart: ChartComponent;

  public onResizeStop(args: ResizeArgs): void {

    this.chart.refresh();

  };

}

API : https://ej2.syncfusion.com/angular/documentation/api/dashboard-layout/#resizestop

Query 2 : I initially tried using ngFor to generate two <e-series> for my columns, which caused the chart to inline-overflow the panel. 

We have used ngFor to render multiple chart series, and they are displayed correctly without any overflow issues. Please check the snippet below for reference.

app.component.html 

<ejs-chart>

      <e-series-collection>

          <e-series *ngFor="let row of dataTotal"

 [dataSource]='row.data'   type='Column' 

xName='x'  yName='y'  [name]='row.seriesName'>  

          </e-series>

    </e-series-collection>

</ejs-chart>

 

app.component.ts

public dataTotal: Object[] = [

    {

      data : [

        { x: 'January 19', y: 30200 },

        //…

      ],

      seriesName: 'Series 1'

    },

    {

    data : [

      { x: 'January 19',  y: 35000 },

      //..

    ],

    seriesName:'Series 2'

  },

  ];

We kindly request you to provide the following details to assist with further analysis:

• The code snippet where you have used ngFor.
• An output image or video showing the chart series overflowing within the panel.
• Any additional customizations you have applied.

This information will help us investigate the issue more effectively.

We have attached a modified sample for your reference. Let us know if you have any further concerns.

Sample : https://stackblitz.com/edit/angular-ablash-2gqdsoua

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Eden O]

Thank you, works perfect

About the issue with ngFor, I have retried and it's working now, although I'm not sure what changed.

[Veerakumar Narayanasamy]

Hi Eden,

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you.

Regards,

Veerakumar N.