visualise = async container => {
const visualiser = await new Highcharts.Visualiser(
container,
options
).build();
container.replaceChildren(visualiser.element);
return visualiser;
}
data = Data.buildMeasureMap(WorkforceData.sizeByMonthForCalendarYear.months, [
{ id: "averageHeadcount" },
{
id: "openingClosingHeadcount",
source: row => {
const decline = row.openingHeadcount < row.closingHeadcount;
return {
borderColor: decline ? "#66BB6A" : "#FFA726",
color: decline ? "#C8E6C9" : "#FFE0B2",
low: row.openingHeadcount,
high: row.closingHeadcount
};
}
}
])
options = ({
chart: {
animation: false,
backgroundColor: "transparent",
reflow: false,
style: { fontSize: "1em" }
},
legend: {
itemStyle: { fontSize: "0.875em", fontWeight: "normal" },
symbolRadius: 0
},
plotOptions: { series: { animation: false, stacking: "normal" } },
series: [
{
borderColor: "#66BB6A",
color: "#C8E6C9",
data: data.openingClosingHeadcount,
name: "Period of Growth",
type: "columnrange"
},
{
borderColor: "#FFA726",
color: "#FFE0B2",
name: "Period of Decline",
type: "arearange"
},
{
color: "#2196F3",
data: data.averageHeadcount,
name: "Average Headcount",
type: "line"
}
],
title: {
style: { fontSize: "1.125em" },
text: `Average Headcount by Month for ${Data.workforceSizeYear}`
},
xAxis: [
{
categories: Data.monthAbbreviations,
labels: { style: { fontSize: "0.875em" } }
}
],
yAxis: [
{
labels: { format: "{value:,.0f}", style: { fontSize: "0.875em" } },
title: { text: "Headcount" }
}
]
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
