<div style="display: block">
  <!-- Drilldown mode indicator -->
  <div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
    <span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
    <button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
      Back to Level {{currentDrilldownLevel - 1}}
    </button>
    <button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
      Back to Main View
    </button>
  </div>
  
  <!-- No data message -->
  <div *ngIf="noDataAvailable" style="text-align: center; padding: 20px; color: #666; font-style: italic;">
    No data available
  </div>
  
  <!-- Chart display -->
  <div *ngIf="!noDataAvailable">
    <canvas baseChart
                [datasets]="lineChartData"
                [labels]="lineChartLabels"
                [options]="lineChartOptions"
           
                [legend]="lineChartLegend"
                [type]="lineChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>
  </div>
</div>
<!--     [color]="lineChartColors"-->