I have a trellis style pie chart (multiple pie charts in the same grid), similar to http://www.zingchart.com/docs/chart-types/pie/#pie__trellis_chart. The code I am using is very similar to what is found on that page.
I want to put a unique title over each pie chart. For example, if there rae 4 pie charts and each pie represents a different quarter of the year, then the first one would say "Q1", the second "Q2," etc.
A pie chart is a circular chart divided into wedge-like sectors, illustrating proportion. Each wedge represents a proportionate part of the whole, and the total value of the pie is always 100 percent. Pie charts can make the size of portions easy to understand at a glance.
The pie chart is a pictorial representation of data that makes it possible to visualize the relationships between the parts and the whole of a variable.
Trellis style pie charts can't use the title object for each pie. There are two options here:
A) Stick with trellis and use individually positioned/styled labels for your titles:
labels:[
{
text:"Title 1",
x: "22%",
y: "10%",
fontSize: 16
},
{
text:"Title 2",
x: "71%",
y: "10%",
fontSize: 16
},
{
text:"Title 3",
x: "22%",
y:"54%",
fontSize: 16
},
{
text: "Title 4",
x: "71%",
y:"54%",
fontSize: 16
}
],
Full demo of the trellis pie chart with individually styled labels.
B) Instead of using trellis, use a graphset with 4 pie charts. This way you have access to the title object for each pie.
var myConfig = {
"graphset": [{
"type": "pie",
"title": {
"text": "Title 1"
},
"series": [{
"values": [59]
}, {
"values": [55]
}, {
"values": [30]
}, {
"values": [28]
}, {
"values": [15]
}]
}, {
"type": "pie",
"title": {
"text": "Title 2"
},
"series": [{
"values": [60]
}, {
"values": [40]
}, {
"values": [35]
}, {
"values": [30]
}, {
"values": [20]
}, ]
}, {
"type": "pie",
"title": {
"text": "Title 3"
},
"series": [{
"values": [50]
}, {
"values": [40]
}, {
"values": [30]
}, {
"values": [20]
}, {
"values": [10]
}, ]
}, {
"type": "pie",
"title": {
"text": "Title 4"
},
"series": [{
"values": [40]
}, {
"values": [55]
}, {
"values": [49]
}, {
"values": [40]
}, {
"values": [16]
}, ]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>
Run the snippet above to see the demo.
I'm on the ZC team. We're here to help!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With