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.
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.
