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:

<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
Community showcase
Posted Oct 24, 2018 in Confluence

Atlassian Research opportunity with Confluence templates

Do you use templates with Confluence? Take part in a remote 1-hr workshop. You'll receive USD $100 for your time!   We're looking for people to participate in a   remote 1-hr workshop...

1,144 views 20 14
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