aspect: 'stepped' doesn't work as expected.

[mehmetekinci]

const myJson = {
      type: 'area',
      globals: {
        fontFamily: 'Roboto'
      },
      backgroundColor: '#fff',
      title: {
        text: 'text',
        adjustLayout: true,
        backgroundColor: 'none',
        fontColor: '#05636c',
        fontSize: '24px',
        height: '25px',
        y: '15px'
      },
      plot: {
        aspect: 'stepped',
        stepStart: 'after',
        lineWidth: '2px',
        marker: {
          size: '1px',
          visible: true
        }
      },
      plotarea: {
        adjustLayout: true,
        marginBottom: 'dynamic',
        marginLeft: 'dynamic',
        marginRight: 'dynamic',
        marginTop: '10%'
      },
      preview: {
        borderWidth: 1,
        handle: {
          lineWidth: 0,
          height: 20
        },
        adjustLayout: true
      },
      scaleX: {
        transform: {
          type: 'date',
          all: '%dd %M\n %G:%i'
        },
        guide: {
          lineWidth: '0px'
        },
        item: {
          fontColor: '#05636c',
          textAlign: 'center',
          fontSize: '8px'
        },
        itemsOverlap: true,
        label: {
          text: 'Hour Range',
          fontSize: '14px',
          fontWeight: 'normal',
          offsetX: '10%'
        },
        tick: {
          lineWidth: '2px'
        },
        zooming: true
      },
      scaleY: {
        autoFit: true,
        minValue: 'auto',
        short: true,
        guide: {
          alpha: 0.2,
          lineStyle: 'dashed',
          lineWidth: '0px'
        },
        item: {
          fontColor: '#05636c',
          fontWeight: 'normal'
        },
        label: {
          text: 'Time',
          fontSize: '14px'
        }
      },
      crosshairX: {
        lineColor: '#898989',
        lineStyle: 'dashed',
        lineWidth: '1px',
        marker: {
          size: '4px',
          visible: true
        },
        plotLabel: {
          visible: true
        }
      },
      series: seriesData
    };

    if (guidelines.length === 1 && isGuidelineVisible) {
      myJson.plot.rules = [
        {
          rule: `%node-value > ${guidelines[0].limitValue}`,
          lineColor: 'red'
        }
      ];
    }
    if (guidelines.length === 0 || !request.isGuidelineVisible) {
      myJson.plot.rules = [
        {
          rule: `%node-value > 0`
        }
      ];
    }

    zingchart.render({
      id: 'myChart',
      data: myJson,
      height: '50%',
      width: '100%'
    });

I use the above configuration to visualize the sometimes large amount of data I have. I need to use aspect: 'stepped' for visualization. I create a specific guide line and visualize the values above it with a different colored line. For this, I use plot.rules. It works under these conditions, but when the amount of data increases, I encounter two situations:

case 1: aspect: 'stepped' doesn't work as expected. Default aspect value is working until zoom in. When zoom in aspect : 'stepped' comes into play.

case 2: if i use plot.rules, aspect: 'stepped' kicks in immediately. This time it is difficult to zoom in. Because when there is a lot of data, every time you zoom in, it is filtered again with the condition in the rules (if I'm not wrong).

What do you recommend?