Title for Trellis Pie Charts in ZingChart

Question

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.

Eakins

Answer 1

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!

Chaucerian

One other question using this approach. How do I add a single label that will apply to all of the pie charts on the page, given that each pie chart is independent of each other? – Eakins

actually, I have a bunch of things I am not able to do with the graphset approach: (1) add a single legend. I have sort of managed to do that, but the legend includes many more series than actually exists. (2) how to show all of the pie charts on a single horizontal axis. (3) set tooltips for each one based on a custom format. (4) set the relative size of each pie chart based on the overall amount in each pie. size-factor is not working. – Eakins

ZC team member here - we're working on a demo for your questions. – Chaucerian

Here's a demo that addresses items 1-3 in your second comment. demos.zingchart.com/view/6KDYBFXX Single, shared legend is accomplished by setting "shared" to true in each chart's legend object and hiding all but one of them. Displaying all charts on a horizontal axis is done by setting the layout to "h" above the graphset. Custom tooltip text is achieved by setting tooltip text inside of each chart object as you see fit. Use tokens to grab the values you want from the chart: zingchart.com/docs/features/tokens – Chaucerian

By shared label, do you mean a title? Also, the size-factor attribute is not calculated on the sum of the nodes - it is set by you and relative to the original dimensions of the chart. If you want to set it based on the sum of the nodes, you would need to write a function to calculate that yourself. – Chaucerian

I am looking at the solution provided by ZC more closely: demos.zingchart.com/view/6KDYBFXX (which is amazing, btw). I was wondering if we can do one more thing. (Btw, note that the tooltip property is not repeated for each pie, so you should fix that.) If we change the title property of each pie to be subtitle, is there a way we can add single title to the entire graphset? – Eakins

Also trying to get a single title set for multiple charts using a 1x2 layout. Tried setting a title object on the data attribute outside of graphset attribute with no luck. Any other suggestions? – Internationalist