InitChart = ( container, initialData ) =>
{
	let maxLength = 200;

	const canvas = document.createElement( 'canvas' );
	canvas.className = 'steamdb_achievements_csrating_graph';
	container.append( canvas );

	const ctx = canvas.getContext( '2d' );
	ctx.font = '16px "Motiva Sans", sans-serif';

	const tooltip = document.createElement( 'div' );
	tooltip.className = 'community_tooltip steamdb_achievements_csrating_graph_tooltip';
	document.body.append( tooltip );

	canvas.addEventListener( 'mousemove', ( event ) =>
	{
		const gap = canvas.offsetWidth / ( Math.min( initialData.length, maxLength ) - 1 );
		const x = event.offsetX - ( gap / 2 );
		const index = Math.ceil( x / gap );
		DrawChart( initialData, index, canvas, tooltip, maxLength );
		tooltip.style.display = 'block';

		const tooltipWidth = tooltip.clientWidth;
		const shiftTooltip = event.pageX + tooltipWidth - document.body.clientWidth;
		tooltip.style.left = shiftTooltip > 0
			? event.pageX - shiftTooltip + 'px'
			: event.pageX + 'px';
		tooltip.style.top = event.pageY + 30 + 'px';
	} );

	const resetCanvas = () =>
	{
		DrawChart( initialData, -1, canvas, tooltip, maxLength );
		tooltip.style.display = 'none';
	};
	canvas.addEventListener( 'mouseleave', resetCanvas );
	window.addEventListener( 'resize', resetCanvas );

	maxLength = Math.min( maxLength, initialData.length );

	/** @type {HTMLInputElement} */
	const maxLengthInput = document.createElement( 'input' );
	maxLengthInput.className = 'steamdb_achievements_csrating_graph_slider';
	maxLengthInput.type = 'range';
	maxLengthInput.min = '2';
	maxLengthInput.max = initialData.length.toString();
	maxLengthInput.value = maxLength.toString();
	maxLengthInput.addEventListener( 'input', () =>
	{
		maxLength = Number.parseInt( maxLengthInput.value, 10 );
		DrawChart( initialData, -1, canvas, tooltip, maxLength );
	} );
	canvas.insertAdjacentElement( 'afterend', maxLengthInput );

	return { canvas, tooltip, maxLength };
}
@param {Element} container
@param {CSRArray} initialData