Alignment of line charts in a connection group when using Apache ECharts

Question

When using the line charts from Apache ECharts I have connected 3 charts of data in a connection group that I need to line up properly based on their X axis, however the Echarts is increasing the scaling on one of the charts and as such the data is misaligned despite the pointer being at 20.6 on all graphs they do not line up This is causing major issues with visual analysis of the data

Is there any features within the ECharts library to fix this.

    (this.renderHtml = function () {
    return `<div class="widget-content widget-echartsLineChart svg-chrome-fix"><div id="${this.jqElementId}"></div></div>`;
  }),
    (this.afterRender = function () {
      this.myChart = echarts.init(
        document.getElementById(this.jqElementId),
        null,
        {
          renderer: 'canvas',
          useDirtyRect: false
        }
      );

      let defaultOptions = {
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'item',
          confine: true,
          axisPointer: {
            type: 'cross'
          }
        },
        dataZoom: {
          type: 'slider'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value'
        }
      };

      // this.options = {...this.mapPropertiesToOptions(), ...defaultOptions};

      this.options = mergeDeep(defaultOptions, this.mapPropertiesToOptions());
      this.options && this.myChart.setOption(this.options);

      let chartGroup = this.getProperty('ChartGroup');
      if (chartGroup != null && chartGroup?.trim().length > 0) {
        this.myChart.group = chartGroup;
        echarts.connect(chartGroup);
      }

      this.resize();
    }),
    (this.resize = function (width, height) {
      if (this.properties.ResponsiveLayout && this.myChart) {
        this.myChart.resize();
      }
    }),
    (this.updateProperty = function (updatePropertyInfo) {
      if (updatePropertyInfo.TargetProperty == 'TestInfotable') {
        this.setProperty(
          'TestInfotable',
          updatePropertyInfo.SinglePropertyValue
        );

        // console.log(updatePropertyInfo.ActualDataRows)

        let seriesData = [];
        let legend = [];

        updatePropertyInfo.ActualDataRows.forEach((series) => {
          seriesData.push({
            id: series.SeriesId,
            name: series.SeriesTitle,
            data: this.prepareSeriesData(series),
            type: 'line',
            color: series.SeriesLineColour ?? undefined,
            symbolSize: 1,
            lineStyle: {
              type: series.SeriesLineType ?? 'solid'
            }
          });

          legend.push(series.SeriesTitle);
        });

        // this.options.xAxis.data =
        //   updatePropertyInfo.ActualDataRows[0].XAxis.rows.map(
        //     (row) => row.value
        //   );
        this.options.series = seriesData;
        this.options.legend = {
          ...this.options.legend,
          ...{
            data: legend,
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 30,
            bottom: 20
          }
        };

        console.log(this.options);

        this.options && this.myChart.setOption(this.options);
      }

      if (updatePropertyInfo.TargetProperty == 'TooltipAdditionalInfo') {
        this.setProperty(
          'TooltipAdditionalInfo',
          updatePropertyInfo.SinglePropertyValue
        );
        this.tooltipStore = updatePropertyInfo.SinglePropertyValue;

        var callback = (args) => {
          var data = this.tooltipStore[args.seriesId];
          var str = '';
          Object.keys(data).forEach((key) => {
            let value = data[key];
            str += `${key} : ${value} <br />`;
          });
          return args.marker + ' ' + args.value + '<br />' + str;
        };

        this.options.tooltip.formatter = callback;

        this.options && this.myChart.setOption(this.options);

        console.log('Options after tooltip info provided : ', this.options);
      }
    }),
    (this.prepareSeriesData = function (series) {
      var data = [];
      series.XAxis.rows.forEach((row, index) => {
        let x = row.value;
        let y = series.YAxis.rows[index].value;
        data.push([x, y]);
      });
      return data;
    }),
    (this.mapPropertiesToOptions = function () {
      let properties = {
        title: {
          text: this.getProperty('ChartTitle'),
          subtext: this.getProperty('Description'),
          left: this.getProperty('ChartTitleHorizontalPosition')?.toLowerCase(),
          top: this.getProperty('ChartTitleVerticalPosition')?.toLowerCase(),
          show: this.getProperty('ShowChartTitle', true)
        },
        grid: {
          top: this.getProperty('GridSpacingTop'),
          bottom: this.getProperty('GridSpacingBottom'),
          left: this.getProperty('GridSpacingLeft'),
          right: this.getProperty('GridSpacingRight'),
          width: this.getProperty('GridWidth', 'auto'),
          height: this.getProperty('GridHeight', 'auto')
        },
        dataZoom: {
          type: this.getProperty('ZoomType')
        },
        xAxis: {
          type: this.getProperty('XAxisType'),
          show: this.getProperty('ShowXAxis', true),
          name: this.getProperty('XAxisTitle'),
          nameLocation: 'middle',
          nameGap: this.getProperty('XAxisTitleSpacing')
        },
        yAxis: {
          show: this.getProperty('ShowYAxis', true),
          name: this.getProperty('YAxisTitle'),
          nameLocation: 'middle',
          nameGap: this.getProperty('YAxisTitleSpacing')
        },
        legend: {
          show: this.getProperty('ShowLegend')
        },
        tooltip: {
          trigger: this.getProperty('TooltipTrigger')
        }
      };

      console.log(
        'Tooltip info available after render ',
        this.getProperty('TooltipAdditionalInfo')
      );

      return properties;
    });

I could process the data again however I wish to avoid mutating the data away from its original forms and reprocessing the data on the client side causes major performance issues especially when stacking multiple datasets onto the charts.