In Echarts, how to title/label series (pies) in nested pie chart - echarts

Question

In Apache Echarts, when using multiple pie charts (e.g. nested pies, or even side-by-side pies), how do we add a title to each pie to signify what the pie represents? While the "title" option can accept an array of titles, there isn't a good way to position them so that they are above, within or in some other way related to the respective pies they are meant to label. It's as if there's a missing concept of a seriesLabel / seriesTitle that sits conceptually between the chart title and the individual item labels.
Series item labels are already in use for the items (pie slices) so cannot be used with position: center, and that wouldn't help with nested pies anyway since there's only room for one label at the center.
Here are my nested pies. I used an image editor to add labels where I might want them - hugging the pies they each label. That's what I'm trying to accomplish.

Answer 1

I do not understand what is your problem with the array of titles...
Here is a simple example showing how to give a title to each pie:
const data = [
{
name: 'Foo',
value: 10
},
{
name: 'Bar',
value: 20
},
{
name: 'Baz',
value: 15
}
];
let option = {
title: [
{
text: 'Pie 1',
subtext: 'Left',
left: '46px',
textAlign: 'center'
},
{
text: 'Pie 2',
subtext: 'Center',
left: '146px',
textAlign: 'center'
},
{
text: 'Pie 3',
subtext: 'Right',
left: '246px',
textAlign: 'center'
}
],
series: [
{
type: 'pie',
radius: '42px',
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
left: 0,
right: '66%',
top: 0,
bottom: 0
},
{
type: 'pie',
radius: '42px',
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
left: '33%',
right: '33%',
top: 0,
bottom: 0
},
{
type: 'pie',
radius: '42px',
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
left: '66%',
right: 0,
top: 0,
bottom: 0
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 300px;
height: 200px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
EDIT 1
Same example with nested pies:
const data = [
{
name: 'Foo',
value: 10
},
{
name: 'Bar',
value: 20
},
{
name: 'Baz',
value: 15
}
];
let option = {
title: [
{
text: 'Pie 1',
left: '48%',
textAlign: 'center'
},
{
text: 'Pie 2',
left: '48%',
top: '26%',
textAlign: 'center'
}
],
series: [
{
type: 'pie',
radius: ['120px', '90px'],
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
top: '10px'
},
{
type: 'pie',
radius: '42px',
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
top: '10px'
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 300px;
height: 300px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
EDIT 2
If you want something completely responsive with nested pies, indeed, I do not know the recipe using a simple array of titles...
But you can do this somehow creating two containers, which means each pie will be in its own <canvas> element. Then you can use CSS to give your inner pie an absolute position.
There is extra work to handle the behavior of both charts on resize. Your <canvas> elements should always be squares. In other words, their width and height should stay equal.
When you resize the window, you have to get its width and height to determine if you have a horizontal display or a vertical one. In both cases, take the smallest value and resize outer and inner containers (width and height) with it. You can even get a variable font size thanks to this value.
Of course, you should avoid px in your options. Prefer % instead.
Here is the code:
const data = [
{
name: 'Foo',
value: 10
},
{
name: 'Bar',
value: 20
},
{
name: 'Baz',
value: 15
}
];
let outerOption = {
title: {
text: 'Pie 1',
top: '2%',
left: '50%',
textAlign: 'center'
},
series: [
{
type: 'pie',
radius: ['100%', '80%'],
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
top: '10%'
}
]
};
let innerOption = {
title: {
text: 'Pie 2',
top: '25%',
left: '50%',
textAlign: 'center'
},
series: [
{
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
top: '10%'
}
]
};
let outerChart = echarts.init(document.getElementById('outer')),
innerChart = echarts.init(document.getElementById('inner'));
outerChart.setOption(outerOption);
innerChart.setOption(innerOption);
function resize(container, size) {
container.resize({
width: size,
height: size
});
container.setOption({
title: {
textStyle: {
fontSize: Math.round(size / 20)
}
}
});
}
['load', 'resize'].forEach(event => {
window.addEventListener(event, () => {
let width = window.innerWidth,
height = window.innerHeight,
size = width;
if (width > height) {
size = height;
}
resize(outerChart, size);
resize(innerChart, size);
});
});
body {
margin: 0;
}
#outer, #inner {
width: 100vh;
height: 100vh;
}
#inner {
position: absolute;
top: 0;
left: 0;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="outer"></div>
<div id="inner"></div>