Example - Rotated Charts

Rotate charts, X-axis down the page

If you need to show charts with the X-axis down the page, this can be easily achieved with a CSS transform. The chart is plotted as normal, then a CSS transform applied to the .ucp-body element.

Here we show some of the Basic Charts of air travel data rotated 90 degress and realigned with CSS. First the charts, then a discussion of the details.

Bar Chart

A simple bar chart with the columns across the page.

Stacked bar chart

A stacked bar chart with columns across the page.

Line Chart

A line chart with lines down the page.

Key

We have disabled the in-chart key in the examples and used a Chart Key From Table content display to show the key below.

1958
1959
1960
View settings

Discussion of details

As noted above, the first change to the charts was to disable the key. The other change was to modify the height to be 100%. On the charts, the View settings button has been disabled because it would have got in the way of other content when rotated with the chart. You can get the settings from Basic Charts and make the changes described. We have left the View settings button on the key so you can copy it.

In the Advanced tab we have added an extra class to the body, it is now ucp-body ucp-rotate-chart. We then used a Header Extra Content attribute to add the <style> section below to define ucp-rotate-chart. You could also add the CSS to your theme.

<style>
.ucp-rotate-chart{
    transform: rotate(90deg) translateY(-100%);
    padding-bottom: 100%;
    transform-origin: top left;
    height: 0;
}
</style>

Transform

The transform has 2 parts. First we rotate right 90 degrees, then we translate the Y axis by -100%. This value needs to match the height of the chart, which is now 100% of the container width.

Padding Bottom and Height

We make the space the chart occupies the same as its width by adding a padding-bottom of 100%. Because the height is managed by the padding, we set the actual height to 0.

Transform Origin

We want to translate about the top left corner. This would have rotated the chart off the left of the page, hence the translation of the Y axis by -100% as per above.

Additional Pages

About this Sidebar

Creating a sidebar for a group of pages without messing about with stacks is an easy use-case for Universal Content Puller.

This sidebar is edited once, within the main addon page for Universal Content Puller.

It is then pulled into all UCP sub-pages using a UCP block.

The Content Source is Parent Page, set to pull the Sidebar area from 2 pages from the top. The Content Transform is Selector, set to remove container and row classes that, when unnecessarily nested, could mess up the Bootstrap grid. The Content Display is Plain, which just outputs the transformed text.

In the advanced settings, sanitization is disabled as we trust the source page and don't want to strip out any formatting or functionality from the pulled sidebar.