visualise = async container => {
const visualiser = await new AMCharts4.Visualiser(container, options).build();
container.replaceChildren(visualiser.element);
return visualiser;
}
options = ({
setup: (am4core, am4charts, element) => {
// Create chart instance
let chart = am4core.create(element, am4charts.PieChart);
// Create pie series
let series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "litres";
series.dataFields.category = "country";
// Add data
chart.data = [
{
country: "Lithuania",
litres: 501.9
},
{
country: "Czech Republic",
litres: 301.9
},
{
country: "Ireland",
litres: 201.1
},
{
country: "Germany",
litres: 165.8
},
{
country: "Australia",
litres: 139.9
},
{
country: "Austria",
litres: 128.3
},
{
country: "UK",
litres: 99
},
{
country: "Belgium",
litres: 60
},
{
country: "The Netherlands",
litres: 50
}
];
// And, for a good measure, let's add a legend
chart.legend = new am4charts.Legend();
}
})
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.
