Как использовать Highchart на Angular?

Существует несколько способов отобразить диаграмму с помощью HTML. Постараюсь объяснить некоторые из них

1. Мы можем отобразить диаграмму на элементе, указав имя элемента в объекте конфигурации диаграммы. Итак, предположим, вы хотите отобразить диаграмму в div, который вы упомянули в файле HTML.

<div eds-tile class = "xl-6" style = "height: 350px">
<eds-tile-title>Count of Ticket ID by CU ID</eds-tile-title>
<div id = "chartContainer"></div>
<!-- Highchart On This -->
</div>

Вы можете настроить объект диаграммы, отобразив элемент

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { CountryunitService } from '../../countryunit.service';
import * as Highcharts from 'highcharts';
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { map } from 'lodash';

класс экспорта YourComponentName реализует OnInit{

setTimeout( ()=>{
  this.Highcharts.chart({
   chart: {
      type: 'column',
      renderTo:'chartContainer',
  },
  title: {
      text: 'Chart.update'
  },

  subtitle: {
      text: 'Plain'
  },

  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
      type: 'column',
      colorByPoint: true,
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
      showInLegend: false
  }]

})},3000);

2. Другой способ: вы можете создать объект конфигурации динамической диаграммы и привязать его к контейнеру, который вы пытаетесь построить.

   this.chartConfig = {
    title: {
     text: 'Chart.update'
     },
   
    subtitle: {
     text: 'Plain'
     },
   
    xAxis: {
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',    'Oct', 'Nov', 'Dec']
     },
   
    series: [{
     type: 'column',
     colorByPoint: true,
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
     showInLegend: false
     }]
   }
   

и в вашем HTML вы можете динамически привязываться к диаграмме (директиве)

 <div eds-tile class = "xl-6" style = "height: 350px">
<eds-tile-title>Count of Ticket ID by CU ID</eds-tile-title>
<div id = "chartContainer">
<chart [options] = "chartConfig"></chart>
 </div>
<!-- Highchart On This -->
</div>

Может быть вероятность того, что css highcharts не будет занимать полную высоту и ширину. Чтобы добавить, вы можете добавить этот css в свой компонент css/scss.

chart {
 width: 100% !important;
 margin: 0 auto;
 display: block;
}

.highcharts-root {
  width: 100% !important;
  display: block;
  } 

 .highcharts-container {
   width: 100% !important;
  }