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

Hi Lynn,

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

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

Regards, Felix

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.

Lynn

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:

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

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

http://www.adaptavist.com/doco/display/CFP/center+Macro

Cheers!

 

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:

screen-chart.png

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.

2-column-example-no-size.PNG

 

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.

2-column-example-sized.PNG

The template is defined as:

<script>
var options = {
        pieSliceText: 'value',
        height: 400,
        width: 400,
        sliceVisibilityThreshold: 0,
        backgroundColor: {stroke: "#666", strokeWidth: 1}
};
PocketQuery.chart('PieChart',options);
</script>

 

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

 

Thanks,

Lynn

 

 

Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Sarah Goff-Dupont
Published 2 hours ago in Confluence

Think you know shares vs. @mentions in Confluence? Take this collab quiz.

To anyone who doubts that Atlassians are a little too obsessed with collaboration, and tools related thereto, let me describe a recent discussion we had (which took place on our internal Confluence, ...

37 views 2 3
Read article

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