Published
Edited
Oct 27, 2018
Insert cell
Insert cell
Insert cell
Insert cell
{
const container = html`<div></div>`
var chart = new G2.Chart({
container: container,
forceFit: true,
height: 600
});
chart.source(data, {
percent: {
formatter: function formatter(val) {
val = val * 100 + '%';
return val;
}
}
});
chart.coord('theta', {
radius: 0.75
});
chart.tooltip({
showTitle: false,
itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
});
chart.intervalStack().position('percent').color('item').label(
'percent',
{
formatter: function formatter(val, item) {
return item.point.item + ': ' + val;
}
}
).tooltip('item*percent', function(item, percent) {
percent = percent * 100 + '%';
return {
name: item,
value: percent
};
}).style({
lineWidth: 1,
stroke: '#fff'
});
chart.render();
return container;
}
Insert cell
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