Public
Edited
Dec 16, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chartInstance = {
const chart = new G2.Chart({
container: "container",
height: 320
});
chart.coordinate({ type: "theta", innerRadius: 0, outerRadius: 0.8 });

chart.data(data);

chart.interaction({ type: "tooltip" }).interaction({
type: "elementHighlight",
highlightedStroke: "black",
highlightedZIndex: 1
});

chart
.interval()
.transform({ type: "stackY" })
.encode("y", "value")
.encode("color", "id")
.label({
text: "value",
fontWeight: "bold",
position: "outside",
transform: [{ type: "spider" }, { type: "dodgeY" }]
})
.style("stroke", "#fff")
.style("lineWidth", 1)
.legend(false)
.encode("enterType", "waveIn")
.encode("updateType", "waveIn")
.interaction({ type: "tooltip" });

chart.render();

return chart;
}
Insert cell
Insert cell
{
const newData = data.filter((d) => series.includes(d.id));
chartInstance.data(newData);
chartInstance.render();
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more