Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sspilleman opened this issue Apr 5, 2024 · 3 comments
Open

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

sspilleman opened this issue Apr 5, 2024 · 3 comments

Comments

@sspilleman
Copy link

sspilleman commented Apr 5, 2024

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
Copy link
Author

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

@hustcc
Copy link
Member

hustcc commented Apr 10, 2024

/**
 * 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
Copy link
Author

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants