5.1.15: (Some) options applied through chart.options dont work

[sspilleman]

Problem Description: 5.1.15: (Some) options applied through chart.options dont work:

chart.options({
    theme: {
        type: 'dark',
        view: {
            viewFill: 'none'
        }
    },
    animate: { enter: { type: undefined, duration: 0 } } <----------------
});
chart
    .interval()
    .data(data)
    .encode('x', 'genre')
    .encode('y', 'sold');

The animation is still there

chart.options({
    theme: {
        type: 'dark',
        view: {
            viewFill: 'none'
        }
    },
});
chart
    .interval()
    .animate({ enter: { type: undefined, duration: 0 } }) <----------------
    .data(data)
    .encode('x', 'genre')
    .encode('y', 'sold');

The animation is gone.....

I believe the animation should be gone in both cases, not making a difference how the config setting is applied

[sspilleman]

please comment and close if you don't think this is an issue....

[hustcc]

/**
 * A recreation of this demo: https://observablehq.com/@d3/donut-chart
 */
import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  height: 640,
});

chart.coordinate({ type: 'theta', innerRadius: 0.6 });

chart.animate('enter', { type: undefined })

chart
  .interval()
  .transform({ type: 'stackY' })
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/79fd9317-d2af-4bc4-90fa-9d07357398fd.csv',
  })
  .encode('y', 'value')
  .encode('color', 'name')
  .style('stroke', 'white')
  .style('inset', 1)
  .style('radius', 10)
  .scale('color', {
    palette: 'spectral',
    offset: (t) => t * 0.8 + 0.1,
  })
  .label({ text: 'name', fontSize: 10, fontWeight: 'bold' })
  .label({
    text: (d, i, data) => (i < data.length - 3 ? d.value : ''),
    fontSize: 9,
    dy: 12,
  })

  .legend(false);

chart.render();

Cannot be reproduced in this code, can help give me a live demo.

[sspilleman]

I think you are missing the point. Applying the animate works, but not using

chart.options({
  animate: { enter: { type: undefined, duration: 0 } }
})

[pearmini]

chart.options({
  theme: {
    type: 'dark',
    view: {
      viewFill: 'none',
    },
  },
  animate: { enter: { type: undefined, duration: 0 } },
});

chart.interval().data(data).encode('x', 'genre').encode('y', 'sold');

This equals to:

chart.options({
  theme: {
    type: 'dark',
    view: {
      viewFill: 'none',
    },
  },
  animate: { enter: { type: undefined, duration: 0 } },
  children: [
    {
      type: 'interval',
      //...
    },
  ],
});

So the animation is still there.

chart.options({
  theme: {
    type: 'dark',
    view: {
      viewFill: 'none',
    },
  },
});

chart
  .interval()
  .animate({ enter: { type: undefined, duration: 0 } })
  .data(data)
  .encode('x', 'genre')
  .encode('y', 'sold');

This equals to:

chart.options({
  theme: {
    type: 'dark',
    view: {
      viewFill: 'none',
    },
  },
  children: [{ type: 'interval', animate: { type: undefined } }],
});

So the animation is gone.

Make sure do not use Chart API and Options API at the same time.