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

This widget could not be displayed.

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>
This widget could not be displayed.

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.

This widget could not be displayed.

Hi Icc,

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

screen-chart.png

Can you provide a screenshot?

Regards, Felix (Scandio)

This widget could not be displayed.

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 Monday in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

341 views 2 5
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