Search code examples
javascriptangulartypescriptprimengngx-charts

ngx-charts lines disappear when chart drawn in PrimeNG dialog that is closed and reopened


I am currently using PrimeNG for my typescript angular application. I am using the dialog component provided by PrimeNG to have a pop up that draws charts via ngx-charts (specifically ngx-charts-line-chart). When I first open the dialog the chart draws fine. However, when I close the dialog and then reopen it the lines from the chart disappear with no error outputted. When the chart is in this state I am still able to hover over it and see the points via the tooltip but the lines have completely vanished. The only potential reason for this I can thing of is that when the dialog is closed it is resizing and causing ngx-charts to do something weird.


Solution

  • Found the answer to this through testing. I used the onHide property of the dialog component to set the chart data to an empty array and then reset the chart data when reopening it.

    In your component HTML do

    <p-dialog (onHide)="onHide()">-chart stuff here-</p-dialog>

    And then in your component ts do

    onHide(){ let o = [] as any; this.chartData = [...o]}

    I imagine it has to be done this was as when the dialog minimized the chart resizes based on the minimized size and it bugs out with the lines on the chart. But if there are no lines then it doesn't try to draw when minimized.