search

tradingview / charting-library-examples

Examples of Charting Library integrations with other libraries, frameworks and data transports
MIT License
1.4k stars 763 forks source link

Can not show more charts but only one if I am using <app-tv-chart-container></app-tv-chart-container> #146

Closed senzacionale closed 4 years ago

senzacionale commented 4 years ago

I have strange problem. Library is working fine with angular 7 but I can show only one chart per page. I can not use loop and show it more at once.

Any ideas why? Seconf trading view chart in same page is always empty and not initialized.

I am using component like this one https://github.com/tradingview/charting-library-examples/blob/master/angular5/src/app/tv-chart-container/tv-chart-container.component.ts

but if I am calling it twice

<app-tv-chart-container></app-tv-chart-container>
<app-tv-chart-container></app-tv-chart-container>

second one is always empty

everget commented 4 years ago

@senzacionale The example was created under assumption of having only one chart at the same time. If you need multiple charts you will have to extend that example. The problem is that TV charting library widget uses an id attribute of a specific element ("container") to mount the chart.

https://github.com/tradingview/charting-library-examples/blob/master/angular5/src/app/tv-chart-container/tv-chart-container.component.ts

export class TvChartContainerComponent implements OnInit, OnDestroy {
    private _containerId: ChartingLibraryWidgetOptions['container_id'] = 'tv_chart_container';

And you can see that the same id is hardcoded in the template https://github.com/tradingview/charting-library-examples/blob/master/angular5/src/app/tv-chart-container/tv-chart-container.component.html

So, you need to pass that id to the template and component both

senzacionale commented 4 years ago

Thank you