How can I center a chart produced via PocketQuery?

[lcc]

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.

screen-chart.png

2-column-example-sized.PNG

2-column-example-no-size.PNG

[Felix Grund (Scandio) · Accepted solution]

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

[lcc]

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

[Felix Grund (Scandio)]

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? 

[Felix Grund (Scandio)]

For my Gauge chart example it worked like this:

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

[lcc]

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

[Felix Grund (Scandio)]

Hi Icc,

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

screen-chart.png

Can you provide a screenshot?

Regards, Felix (Scandio)

[Monika Antos [Adaptavist]]

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!

[Felix Grund (Scandio)]

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.