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: "openingHeadcount" },
{
id: "startingHeadcount",
source: row => row.openingHeadcount + row.startingHires
},
{
id: "endingHeadcount",
source: row => row.closingHeadcount + row.endingTerminations
},
{ id: "closingHeadcount" }
])
options = ({
chart: {
animation: false,
backgroundColor: "transparent",
reflow: false,
style: { fontSize: "1em" }
},
legend: {
align: "right",
floating: false,
itemStyle: { fontSize: "0.875em", fontWeight: "normal" },
layout: "vertical",
title: { style: { fontSize: 15, fontWeight: "normal" }, text: "Headcount" },
verticalAlign: "middle"
},
plotOptions: { series: { animation: false } },
series: [
{
data: data.closingHeadcount,
marker: { radius: 5, symbol: "triangle-down" },
name: "Closing",
type: "line"
},
{
data: data.endingHeadcount,
marker: { radius: 5, symbol: "triangle-down" },
name: "Ending",
type: "line"
},
{
data: data.startingHeadcount,
marker: { radius: 5, symbol: "triangle" },
name: "Starting",
type: "line"
},
{
data: data.openingHeadcount,
marker: { radius: 5, symbol: "triangle" },
name: "Opening",
type: "line"
}
],
title: {
style: { fontSize: "1.125em" },
text: `Actual Headcount by Month for ${WorkforceData.sizeByMonthForCalendarYear.year}`
},
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.
