JavaScript charts VanCharts - Reverse-order Axis

      With Sales Volume.xls as the data source, we will product charts to express the sales volume of each product type in each region in both reverse-order value axis and category axis.

I. Create new chart

      Open VanCharts chart maker and create a new template of Column Chart with Gradient, and set data for the chart in the Chart Attribute - Date in the right as shown below:

JavaScript charts Reverse-order Axis

II. Reverse-order value axis

      Select Chart Attribute - Style > Coordinate Axis > Value Axis in the right and check the box in front of Times New Roman as shown below:

JavaScript charts Reverse-order Axis

      Three changes will follow after the operation:

      1. Category axis will be displayed in the top automatically;

      2. Data 0 on value axis will be displayed on the top and value will increase downwards;

      3. Columns extends downwards.

JavaScript charts Reverse-order Axis

III. Reverse-order coordinate axis

      Similar to the setting for Reverse-order Value Axis, we will select Coordinate Axis > Category Axis and check the box in front of Reverse-order Axis Three changes will follow after the operation:

      1. Data on the category axis will be displayed in reverse order, from the previous left to right to the current right to left;

      2. Value axis will be displayed in the right;

      3. Column series will also be displayed in reverse order, from the previous left to right to the current right to left.

JavaScript charts Online Chart Switch

IV. View effect

      Click page break preview to view the effect in the web as shown below:

JavaScript charts Reverse-order Axis

V. Summary

· Applicable chart type

      Currently, reserve-order axis is only applicable to column, bar, line and area charts in VanCharts, but not to combined chart.

· Note

      If the option to display data sheet has been checked, it will still be displayed in the bottom after change to reverse-order value axis, while the data order in the data sheet will correspond to the category after change to reverse-order coordinate axis. In the sample below, we will display data sheet for the column chart above and view the effect in the web:

JavaScript charts Reverse-order Axis