Charts not redrawing after param change in navigation

[amcharts]

Charts not redrawing after param change in navigation

[Pauan]

If you want to use the same chart across the different routes you can create it once and then use this.AmCharts.updateChart to update it:

ngOnInit(): void {
    
    this.route.paramMap
      .switchMap((params: ParamMap) =>
        this.service.getCoder(params.get('id')))
      .subscribe((coder: Coder) => this.coder = coder);

    this.chart1 = this.AmCharts.makeChart("PRIND_chartdiv1", {
      "type": "serial",
      "theme": "light",
      // rest of chart options here
      "dataProvider": [...]
    });

    this.route.params.subscribe((params: Params) => {
        console.log(params); 

        this.AmCharts.updateChart(this.chart1, () => {
            this.chart1.dataProvider = ...;
        });
    });
}

Alternatively, if you want to display the chart only on some routes, you can create a ChartComponent which contains the chart configuration:

import { Input, Component } from "@angular/core";
import { AmChartsService, AmChart } from "@amcharts/amcharts3-angular";


@Component({
  selector: "chart",
  template: `<div id="{{id}}" [style.width]="width" [style.height]="height"></div>`
})
export class ChartComponent {
  @Input() id: string;
  @Input() width: string;
  @Input() height: string;

  private chart: AmChart;

  constructor(private AmCharts: AmChartsService) {}

  ngAfterViewInit() {
    this.chart = this.AmCharts.makeChart(this.id, {
      "type": "serial",
      "theme": "light",
      // rest of chart options here
      "dataProvider": [...]
    });
  }

  ngOnDestroy() {
    if (this.chart) {
      this.AmCharts.destroyChart(this.chart);
    }
  }
}

You have to use ngAfterViewInit, not ngOnInit

Then you have to register it in your module:

import { ChartComponent } from "./chart.component";

@NgModule({
  declarations: [
    ChartComponent
  ],
  ...
})
export class AppModule { }

Then you can use it in your route's HTML:

<chart id="PRIND_chartdiv1" width="100%" height="500px"></chart>

You can create more @Input() if you want to pass in additional information to the chart, such as a dataProvider

[toddler4372]

Pauan, thanks for the comment. I created the chart component with the configuration set like above, used ngAfterViewInit, and registered it in app.module.ts. I added the chart tag in my route's html, and I'm getting the error:

'chart' is not a known element: If 'chart' is an Angular component, then verify that it is part of this module.

I double checked the name and that ChartComponent is imported in app.module.ts as well as being declared. Any other reason it's not able to recognize the element?

In my app.routes.ts, I have (truncated below):

import { CoderListComponent } from './coders/coder-list.component';
import { CoderDetailComponent } from  './coders/coder-detail.component';

export const ROUTES: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'coders', component: CoderListComponent },
  { path: 'coder/*', component: CoderDetailComponent },
  { path: 'callback', component: CallbackComponent },
  { path: '**', redirectTo: '' }
];

The chart should show up on /coder/2347, for example, which is referencing CoderDetailComponent. If I have the path coder/* use ChartComponent I get the same error, however.