feat(skills): adding complete data chart example

[kdinev]

Fixes IgniteUI/igniteui-cli#1608 for React

Additional information (check all that apply):

• Bug fix
• New functionality
• Documentation
• Demos
• CI/CD

Checklist:

• All relevant tags have been applied to this PR
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes behavioral changes and the feature specification has been updated with them

[Copilot]

Pull request overview

Adds a more complete IgrDataChart (React) reference example to the Ignite UI CLI skills documentation, addressing the need for clearer guidance on multi-module registration and bar chart setup.

Changes:

• Extends the “Common Module Registrations” table to include IgrDataChart and point to a new complete example.
• Adds a “Complete Data Chart Example” section covering required module registrations for bar charts, axis orientation, and a multi-series bar chart sample (with CSS and prop references).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The legend={legendRef.current ?? undefined} pattern won’t reliably wire up the legend: legendRef.current is null during render and refs don’t trigger a re-render when they’re populated, so the chart will likely keep legend as undefined. Use a callback ref / state setter to trigger a re-render, or set chartRef.current.legend in a useEffect after mount (and update the nearby comment that rendering order is sufficient).

Suggested change

	return (
	<div className={styles['chart-wrapper']}>
	<h3 className={styles['legend-title']}>Highest Grossing Movie Franchises</h3>
	{/* Legend must be rendered before the chart so the ref is populated */}
	<IgrLegend ref={legendRef} orientation="Horizontal" />
	<div className={styles['chart-container']}>
	<IgrDataChart legend={legendRef.current ?? undefined}>
	const chartRef = useRef<IgrDataChart>(null);
	const attachLegend = (legend: IgrLegend | null) => {
	legendRef.current = legend;
	if (chartRef.current) {
	chartRef.current.legend = legend ?? undefined;
	}
	};
	const attachChart = (chart: IgrDataChart | null) => {
	chartRef.current = chart;
	if (chart) {
	chart.legend = legendRef.current ?? undefined;
	}
	};
	return (
	<div className={styles['chart-wrapper']}>
	<h3 className={styles['legend-title']}>Highest Grossing Movie Franchises</h3>
	{/* Wire the legend to the chart after mount using callback refs */}
	<IgrLegend ref={attachLegend} orientation="Horizontal" />
	<div className={styles['chart-container']}>
	<IgrDataChart ref={attachChart}>

[Copilot]

The comment says the value axis should "start at 0", but the example doesn’t set any axis minimum. Either set the appropriate axis minimum value property (so the axis actually starts at 0) or remove the claim to avoid misleading readers.

Suggested change

	title="Billions of U.S. Dollars"
	title="Billions of U.S. Dollars"
	minimumValue={0}