How to use trellis chart with stacked column in Angular 10 using Highcharts

Issue

How can we create trellis chart in Angular 10 using Highcharts.

I found a resource that shows how to create trellis chart but using javascript. http://jsfiddle.net/pranavmdesai/vd6w53sk/6/

In angular, packages that i am using is npm install angular-highcharts npm install highcharts

So, we need to use two objects like below

Highcharts = Highcharts;
chartOptions = {};

But as per the example provided in above resource, we need to push each chart in array and assign a container to it in html for the chart to render itself. But how do we achieve the same functionality in angular 10 because we assign above objects as below in HTML

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 500px; display: block;"
></highcharts-chart>

Solution

In the demo below I recreated the official demo from the docs below. I have created a separate universal component for the chart and then in the App HTML part I have created the table and for each chart, I have provided the name and data. It's just a basic example to show you how it might be achieved.

The chart element in HTML:

<td>
    <app-trellis [name]="'Firs'" [data]="[1, 2, 3, 4]"></app-trellis>
</td>
    

Docs: https://www.highcharts.com/docs/chart-and-series-types/bar-chart
Demo: https://stackblitz.com/edit/highcharts-angular-trellis

Answered By - Karol Kołodziej