How to change the type of the vertical grid line and extend the horizontal lines beyond the chart in ngx-echarts?

I am trying to create a beautiful chart to visualize the dynamics of school students' performance.

I am using Angular version 17.3.0, ECharts version 5.5.1, and ngx-echarts version 17.2.0.

I have this config:

{
    grid: {
      left: 20,
      right: 25,
      top: 0,
      bottom: 40,
    },
    xAxis: {
      type: 'category',
      data: [
        '9 фев',
        '16 фев',
        '23 фев',
        '1 мар',
        '8 мар',
        '15 мар',
        '22 мар',
        '29 мар',
        '5 апр',
        '12 апр',
      ],
      boundaryGap: false,
      axisLabel: {
        interval: 0,
        overflow: 'truncate',
        color: '#86909C',
        fontSize: 14,
        fontWeight: 'normal',
        margin: 10,
        formatter: (value: string) => {
          const [day, month] = value.split(' ');
          return `{a|${day}}\n{b|${month}}`;
        },
        rich: {
          a: {
            fontSize: 14,
            align: 'center',
          },
          b: {
            fontSize: 14,
            align: 'center',
          },
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    yAxis: {
      type: 'value',
      min: 1,
      max: 6,
      interval: 1,
      position: 'right',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
        },
      },
      axisLabel: {
        color: '#0B1F33',
        fontSize: 16,
        fontWeight: 'bold',
        margin: 12,
        formatter: (value: number) => {
          if (value < 2 || value > 5) {
            return '';
          } else {
            return value.toString();
          }
        },
      },
    },
    series: [
      {
        name: 'Test',
        type: 'line',
        smooth: true,
        data: [null, 4, null, null, 4.57, 5, 4],
        connectNulls: true,
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: '#0E69D5',
          borderColor: '#ffffff',
          borderWidth: 1,
        },
        lineStyle: {
          color: '#185AC5',
        },
        symbol: 'circle',
        symbolSize: 7,
        markLine: {
          symbol: 'none',
          tooltip: { show: false },
          label: { show: false },
          data: [
            {
              xAxis: 6,
              lineStyle: {
                color: '#0E69D5',
                width: 1,
                type: 'solid',
              },
              emphasis: {
                disabled: true,
              },
            },
          ],
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(192, 216, 253, 0.80)' },
              { offset: 1, color: 'rgba(237, 247, 255, 0.08)' },
            ],
          },
        },
      },
    ],
  }

This is how it looks:

Could you please tell me how I can change the type of the line marked in red to solid without affecting the other vertical lines? And how can I make the horizontal lines extend beyond the boundaries of the chart as I've shown in green? Or is this impossible to do with ECharts? If it’s impossible, could you please recommend other libraries?

The best possible solution that comes to my mind (which will intervene the least with other functionalities) is to use a second grid which is slighty larger together with category axes (they dont need a series attached for the ticks to be calculated) to display the splitLines. In order to make this solution work with dynamic data we need a way to determine the number of ticks echarts will choose for the data. This can be done by adding the data to the chart and capturing the highest index passed to the label formatter. Then, the data of the second yAxis can be set to the computed number, delayed by one tick with setTimeout.

Example:

let tickNr = 0;

option = {
  grid: [{}, {id: 'helperGrid', left: 60}],
  xAxis: [{
    type: 'category',
    splitLine: { show: true },
  },
  {
    gridId: 'helperGrid',
    type: 'category',
    axisTick: { show: false },
    axisLabel: { show: false }
  }],
  yAxis: [{
    type: 'value',
    position: 'right',
    axisLabel: {
      formatter: (value, index) => {
        if (index > tickNr) tickNr = index;
        return value;
      }
    }
  },
  {
    id: 'helperAxis',
    gridId: 'helperGrid',
    type: 'category',
    axisLine: { show: false },
    axisTick: { show: false },
    splitLine: { show: true },
    axisLabel: { show: false },
  }],
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
  ]
};


setTimeout(function() {
  myChart.setOption({yAxis: [
    {
      id: 'helperAxis',
      data: Array.from({length: tickNr})
    }
  ]})
}, 1);