Angular- How to customize ngx-echart line-graph?

Question

I was working on a project involving ngx-echarts. I made three mat-cards which acts as categories,they are 0-10, 10-60 and lastly 60+. This is the dataset I am working with

this.data = [
      { segment: '<10 units', value: 30 },
      { segment: '20-25 units', value: 0 },
      { segment: '25-30 units', value: 5 },
      { segment: '20-40 units', value: 0 },
      { segment: '40-50 units', value: 80 },
      { segment: '50-60 units', value: 10 },
      { segment: '60-80 units', value: 0 },
      { segment: '80-100 units', value: 0 },
    ];

this is the graph I have plotted Here I am facing three issues:

1. I am unable to plot the points in their respective categories. Eg, { segment: '20-25 units', value: 0 }, the point here should be in the 2nd mat-card but instead it gets plot in the 1st mat-card?
2. I am unable to make the graph responsive according to the width and height of the mat-card.
3. How to format the tooltip?

Can someone help? This is the stackblitz link of the project.

I tried this

      interval: 50
   }

in xAxis, but I am unable to add any distance between the points to push it to the next mat-card.

For the tooltip, I tried this

  formatter: function(params) {
    var title = params[0].segment;
    var value = params[0].value;
    return `${title}: ${value}`;
    }

But nothing worked.