},
	stackSelector(input) { return input[0]; },
	state: {
		columnHeight: 150,
		columnSpacing: 3,
		columnWidth: 10,
		domain: [-15, 15],
		height: 200,
		stackSpacing: 1,
		width: 100,
		xInset: 30
	},
	valueSelector(input) { return input[1]; }
});

global.basic = basic;
global.domain = domain;
global.allNegative = allNegative;
global.allNegativeDomain = allNegativeDomain;
global.group = group;
global.stack = stack;
global.stackDomain = stackDomain;

projector.append([
	basic, domain,
	allNegative, allNegativeDomain,
	group,
	stack, stackDomain
]);
projector.attach();

		labels: { anchor: 'middle', textAnchor: 'end', rotation: 45, offset: -5 },
		ticks: { anchor: 'end', length: 10, zeroth: true }
	},
	state: {
		columnHeight: 200,
		columnSpacing: 10,
		columnWidth: 20,
		domain: 50000,
		height: 330,
		stackSpacing: 1,
		styles: { marginTop: '20px' },
		width: 300,
		xInset: 75,
		yInset: 25
	},
	// Example of passing an observable to the chart.
	inputSeries: byProvince,
	divisorOperator: max,
	stackSelector(input) { return input.province; },
	valueSelector(input) { return input.count; }
});

// Make the charts available to the console.
global.absoluteChart = absoluteChart;
global.groupedByProvinceChart = groupedByProvinceChart;
global.percentageChart = percentageChart;
global.stackedByProvinceChart = stackedByProvinceChart;

projector.append([percentageChart, absoluteChart, groupedByProvinceChart, stackedByProvinceChart]);
projector.attach();

const header = createWidget({
	id: 'header',
	stateFrom: widgetStore,
	tagName: 'h1'
});

widgets.push(header);

const layoutContainer = createLayoutContainer({
	id: 'layout-container',
	stateFrom: widgetStore
});

widgets.push(layoutContainer);

projector.append(widgets);

const panelFixed = createPanel({
	id: 'panel-fixed',
	stateFrom: widgetStore
});

layoutContainer.append(panelFixed);

const panelResize = createResizePanel({
	id: 'panel-resize',
	stateFrom: widgetStore
});

panelFixed.append(panelResize);

		length: 35
	},
	ticks: {
		anchor: 'end',
		length: 10,
		zeroth: true
	}
}, chartOptions));

const longGridLines = createColumnChart<number>(createAxesConfiguration({
	hardcoded: inputSeries.map(input => input / MAX_INPUT).map<[number, string]>(relative => {
		return [relative, String((relative * 100).toFixed(0)) + '%'];
	}),
	gridLines: {
		length: 120
	},
	ticks: {
		anchor: 'end',
		length: 10,
		zeroth: true
	}
}, chartOptions));

projector.append([
	inputs, inputsGridLines, inputsNoTicks,
	range, rangeAdjustedMax, rangeGridLines, rangeMax25, rangeNoTicks,
	hardcoded, hardcodedGridLines, hardcodedNoTicks, hardcodedWithIgnoredSteps,
	shortGridLines, longGridLines
]);
projector.attach();