Reverse Layout to Read Left to Right in AngularJS

Background:

FlexChart is typically read left to right, though there will be occasions where users will need to have the FlexChart displayed right to left. This is a built-in property of FlexChart that just needs a value assigned for the chart to be reversed.

Steps to Complete:

1. Add a WjFlexChartAxis element to the FlexChart

2. Assign a value to the 'reversed' property to signify that the grid needs to be reversed on that axis

Getting Started

Add a WjFlexChartAxis element to the FlexChart

In order for the FlexChart to be flipped, we need to instantiate am axis object for the chart. This can be done by adding the markup for the axis between the FlexChart tags.

<wj-flex-chart items-source="data">
    <wj-flex-chart-axis wj-property="axisX"></wj-flex-chart-axis>
</wj-flex-chart-axis>

This creates the axis element, and setting the wj-property signifies that this will be the X-Axis of the chart.

Assign a value to the 'reversed' property to signify that the grid needs to be reversed on that axis

Finally, to flip the chart, the 'reversed' property needs to be set, which is just a boolean property that determines how to display the chart.

<wj-flex-chart-axis wj-property="axisX" reversed="true"></wj-flex-chart-axis>

You can find a live sample of this project at this location: http://jsfiddle.net/JParksGC/hujr1mje/