Name for Trellis Peony Charts in ZingChart

Question

I have a grid type 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 use is very similar to what is on this page.

I want to put a unique title above each pie chart. For example, if there are 4 pie charts, and each pie represents a different quarter of the year, then the first will say “Q1”, the second “Q2”, etc.

Answer 1

Pie charts like Trellis cannot use a heading for each pie. There are two options here:

A) Attach the grille and use individually arranged / stylized 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 pie chart with custom labels.

B) Instead of using a grid, use a graphic set with 4 pie charts. Thus, you have access to the name of the object for each cake.

 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 a demo.

I am on the ZC team. We are here to help!