By taking advantage of the CSS
transform
property, we can easily transform this chart from a vertical bar chart to a horizontal one. This process, however, cannot be defined generically, as we did for bars and series, because it is closely dependent upon the chart size; so, we'll use the
.this_bar_chart
selector.
To accomplish this, we'll change the width
and height
properties of the chart (we'll set them both to 500px
to better handle the sub-sequential rotation), rotate the whole chart by 90
degrees, and then rotate back the text elements in order to keep them readable.
Here's the CSS:
@import "compass/css3/transform"; .this_bar_chart{ @include transform(rotate(90deg) translate(10px,-10px)); width: 500px; height: 500px; *[data-bar]{ &:before{ @include transform(rotate(-90deg) translate(-7px,0px)); } .value:after{ @include transform(rotate(-90deg) translate( 5px ,0px)); ...