Have to click tab twice to display chart

[keen ivy]

When I click back and forth between tabs, I only want to do one click. It works great for displaying text but it requires two clicks for the chart. Is there a way to solve this?

I get this error "Failed to create chart: can't acquire context from the given item" the first click. Then the second click works.

Notes: I have the create chart function in charts.ts and export it in get-stock-list.component.ts. The HTML below is from my get-stock-list.component.html file.

I'm using Chart.js for my chart library. Code attached.

<div class="container"> <div class="tab"> <ul> <li id="volume" (click)="tabChange('volume')">Daily Volume </li> <li id="price" (click)="tabChange('price')">Daily Average Price</li> <li id="">Daily Chart</li> </ul> </div> </div> <div class="content"> <div class="content-value" *ngIf="id === 'volume'"> <canvas id="volume-canvas"></canvas> </div> <div class="content-value" *ngIf="id === 'price'"> <!-- insert price chart here --> </div> </div>

[violet wagon]

I think you may have a component lifecycle issue

It may be initializing looking for the context before the template has been rendered

the fact that you're calling the DOM directly from the component is also not idiomatic angular

I'm fairly confident though that you're pressing tab change, it's looking for the new canvas element to be rendered, but it hasn't yet because the template has not updated the DOM yet to render the new canvas element under *ngIf

I'd suggest making volume and pricing charts into their own components, then when they are rendered they can set themselves up in due course

Alternatively, you could have the charts drawn to the same canvas element

instead of different canvases

[keen ivy]

hmm i was thinking about making a component for each chart, but wouldn't that be a whole page? How can i limit it to that tabbed space?

or how do i make that component fit into a square on the main page

[violet wagon]

You can just put the component into the div with the space restrictions

[keen ivy]

ooh with the selector