Angular 13 - Highchart

 npm install highcharts --save

npm install highcharts-angular --save

add high chart as component and def at declarations

 

import { HighchartsChartModule } from 'highcharts-angular'; 

@NgModule({

   declarations: [

      AppComponent,

         

   ],

   imports: [

      BrowserModule,

  commonModule,

  HighchartsChartModule

   ],

   providers: [],

   bootstrap: [AppComponent]

})

export class AppModule { }

<highcharts-chart

   [Highcharts] = "highcharts" 

   [options] = "chartOptions" 

   style = "width: 100%; height: 400px; display: block;">

</highcharts-chart>

import * as Highcharts from 'highcharts';

@Component({

  selector: 'app-highchart',

  templateUrl: './highchart.component.html',

  styleUrls: ['./highchart.component.less']

})

export class HighchartComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {

  }

highcharts = Highcharts;

  chartOptions: Highcharts.Options = {

    title: {

      text: 'Average Temprature',

    },

    xAxis: {

      title: {

        text: 'Tokyo',

      },

      categories: [

        'Jan',

        'Feb',

        'Mar',

        'Apr',

        'May',

        'Jun',

        'Jul',

        'Aug',

        'Sep',

        'Oct',

        'Nov',

        'Dec',

      ],

    },

    yAxis: {

      title: {

        text: 'Temprature',

      },

    },

    series: [

      {

        data: [

          7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 24.4, 19.3, 16.0, 18.4, 17.9,

        ],

        type: 'spline',     // type:'bar', type:'pie' , type: 'spline',   

      },

    ],

  };

}