How can I center a chart produced via PocketQuery?

I would like to center the charts produced via PocketQuery. Centering the PocketQuery macro does nothing to the chart, it always renders against the left side.

4 answers

1 accepted

0 votes
Accepted answer

Hi Lynn,

Can you try to put this on top of your template:

.pocket-chart div[dir='ltr'] { margin: 0 auto; }

Regards, Felix


Thanks for the tip, I was able to get it to work for Pie, Line and Bar chart's. I haven't had any luck yet with the Gauge chart. I have a few more things to check, I'll let you know if I succeed or not.

Thank you for your help! I've been chasing this on and off for awhile.


Thanks Lynn! I'll check with Gauge myself later. If you haven't yet, would you consider leaving a review for PQ on the marketplace? smile

For my Gauge chart example it worked like this:

.pocket-chart > table { margin: 0 auto; }

If nothing else works, you may want to explore the 'center' macro from the free Content Formatting Macros add-on:



I would not recommend to use the center macro since output of the PocketQuery macro will always depend on a macro of another plugin. I'd try to minimize cross-plugin dependencies as far as possible.

Hi Icc,

In my example, the chart is already centered by default actually:


Can you provide a screenshot?

Regards, Felix (Scandio)

Hi Felix,

I think I've found what's happening. If you define the chart without setting a width, it will fill the container you place the chart it. For example the following is from a two column page and the pie chart fills each column and is centered.



On the other hand if you try to define the size of the chart. The chart get's rendered but the result is not centered. For example the same chart, same two column page format, but with a width and height of 400 pixels. The chart renders, but is rendered up against the left side of the column.


The template is defined as:

var options = {
        pieSliceText: 'value',
        height: 400,
        width: 400,
        sliceVisibilityThreshold: 0,
        backgroundColor: {stroke: "#666", strokeWidth: 1}


I've tried putting a <div> tag around everything and a few other ideas, but I haven't found a combination that works yet.






Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Feb 06, 2019 in Confluence

Try out the new editing experience

Hi team, I’m Avinoam, a product manager on Confluence Cloud, and today I’m really excited to let the Community know that all customers can now try out the new editing experience and see some of the ...

1,089 views 56 8
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you