Normalize dat on dataZoom not show correct chart

[edika99]

Version

5.3.0

Link to Minimal Reproduction

https://jsfiddle.net/edika/L467cm0f/27/

Steps to Reproduce

I'm trying to show a comparison chart between two prices series. The comparison should start always from 100. When I zoom the chart the comparison should be recalculated to always show the comparison starting from 100 for the selected period of time. Please check at the jsfiddle, and try to resize the chart to see the behaviour. Looks also at how the last date available is changed unexpectly.

Current Behavior

Data is recalculated correctly, but the resized timeline does not show correct data. The chart does not start from 100 even if the recalculated data start from 100.

Expected Behavior

The comparison should always start from 100, from the start date of the selected period of time

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[andrearoota]

Hi @edika99, this is not a bug of Echarts: there are some bug in your function fillData()

const compData = JSON.parse(data);
      var chartSeries = [];
      var chartDates = [];
      var legend = [];

      const minDate = getMaxDate();

      function fillData(startDate) {
        startDate = (startDate ?? getMaxDate());

        legend = [];
        chartSeries = [];

        compData.details.forEach(e => {
          legend.push(e.name);

          let prices = [];

          const startDateFormatted = startDate.format('YYYY-MM-DD');
          const zeroPrice = e.prices.find(o => moment(o.priceDate).format('YYYY-MM-DD') === startDateFormatted).priceValue;
          let ratio = 10000 / zeroPrice;

          e.prices.forEach(p => {
            if (minDate.isBefore(moment(p.priceDate)) || minDate.isSame(moment(p.priceDate))) {
              prices.push(Math.round(p.priceValue * ratio) / 100);
              if (chartSeries.length === 0 && minDate.isSame(startDate)) chartDates.push(moment(p.priceDate).format('YYYY-MM-DD'));
            }
          });

          chartSeries.push({ name: e.name, showSymbol: false, smooth: true, type: 'line', data: prices, colorBy: 'series' });
        });
      }

      function getMaxDate() {
        compData.details.forEach((e, index) => {
          let curdata = moment(e.startdate);
          if (index === 0 || curdata.isAfter(mindata))
            mindata = curdata;
        });
        return mindata;
      }

      function initChart() {
        fillData();

        var options = {
          legend: {
            type: 'scroll',
            data: legend,
          },
          tooltip: {
            trigger: 'axis',
          },
          axisPointer: {
            link: {
              xAxisIndex: 'all'
            },
            label: {
              backgroundColor: '#777'
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: chartDates,
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              formatter: function (value) {
                let date = new Date(value);
                return [date.getFullYear(), (date.getMonth() + 1), date.getDate()].join('-');
              }
            }
          },
          yAxis: {
            type: 'value',
            min: 'dataMin',
            max: 'dataMax',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          dataZoom: [
            {
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              filterMode: 'filter',
              top: '90%',
              labelformatter: function (value) {
                var date = new Date(value);
                return [date.getFullYear(), (date.getMonth() + 1), date.getDate()].join('-');
              }
            },
            {
              type: 'inside',
              xAxisIndex: [0],
            }
          ],
          series: chartSeries
        };

        hchart.setOption(options);

        hchart.on('dataZoom',
          function () {
            let opt = hchart.getOption();
            const startdate = moment.utc(chartDates[opt.dataZoom[0].startValue]);
            fillData(startdate);
            opt.series = chartSeries;
            hchart.setOption(opt, true);
          });
      }

      initChart();

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!