Successfully!

Error!

Chart Axis

  • Last update:  2020-12-18
  • I. Overview

    1) The Chart Axis is a setting under the Chart Style attribute, which is used to modify the layout and style of axes (X-axis and Y-axis), as shown in the following diagram:

     图片1.png

    2) Custom Column Chart, Bar Chart, Line Chart, Area Chart and Combination Chart are provided with the Custom Axis mode, allowing users to customize multiple X-axis or Y-axis and well as the position and value order of each axis.

    3) This document describes common axis settings. For charts with special settings, please refer to their own documentation for specific descriptions.

    4) Suggested Reading: Chart Data, Chart Type, Chart Series.

    You will learn
    •  Insert a Simple Chart

    •  Axis Type

    •  Axis Style -X-Axis as Category Axis

      •  Title

      •  Label

      •  Axis Line Style

      •  Value Definition (not applicable to X Axis)

      •  Custom Multi-Axis (not applicable to X Axis)

      •  Position

      •  Display Strategy

      •  Format

    •  Axis Style - X Axis as Time Axis

    •  Axis Style - X Axis as Value Axis

    II. Insert a Simple Chart

    Please refer to Section II Insert a Simple Chart of Chart Series. Those already familiar with inserting charts may skip this section.

    III. Axis Type

    There are three types of X axis, namely: Category axis, Time axis and Numeric Value axis, and we will introduce them later.

    The Y axis consists of numeric value axis only.

    In addition, there are simple value axis, polar angle axis, polar diameter axis, project axis and time axis. As shown in the following table:

    introduction about special axis can be found in the documentation of the corresponding chart type.

    Chart Type\AxisX axis-Category AxisX axis-Linear Numeric AxisX axis-Logarithmic Value AxisX axis-Time AxisY axis-Linear Numeric AxisY axis-Logarithmic Value AxisSimple Value Axis Polar Angel AxisPolar Diameter AxisProject AxisTime Axis

    Column Chart






    Stacked Column Chart






    Percentage Stacked Column Chart






    Custom Column Chart






    Bar Chart






    Stacked Bar Chart






    Percentage Stacked Bar Chart






    Custom Bar Chart






    Line Chart

    ✔ 






    Stacked Line Chart






    Custom Line Chart






    Area Chart






    Stacked Area Chart

     ✔






    Percentage Stacked Area Chart

     ✔






    Custom Area Chart

     ✔






    Multi-pointer Gauge 360°







     ✔





    Multi-pointer Gauge 180°







     ✔





    Percentage Ring Gauge







     ✔





    Percentage Scale Gauge







     ✔





    Tube Gauge







     ✔





    Radar Chart








     ✔

     ✔



    Stacked Column Radar Map








     ✔

     ✔



    Scatter Plot








    Bubble Chart








    Gantt Chart










     ✔

     ✔

     

    IV. Axis Style -X-Axis as Category Axis

    Generally, the X Axis represents category data. For example, Sales Region, Salesperson, Product Category, etc. The chart data is displayed in groups by category.

    • In this case, there are six settings for the X Axis style, namely: Title, Label, Axis Line Style, Position, Display Strategy and Format. Adjustments made to the style can be seen in real time in the floating chart effect on the left.

     图片2.png

    • There are seven axis styles for the Y Axis, namely: Title, Label, Value Definition, Axis Line Style, Position, Display Strategy and Format.

     图片3.png

    Note: The setting of Y Axis is basically identical to that of X Axis except for [Value Definition], so we will use the X Axis for explanation and mark the differences between the X and Y axes.


    1. Title

    After setting the axis title, the title text will be displayed on the axis while displaying on the front end.

    Note: For versions released on August 2, 2020 and later, the title can be hidden or displayed. It is hidden by default, i.e., no axis title is set.

     图片4.png

    After clicking [Display], the user can define the axis title. The title settings are as follows:

    • Content: Edit the title content directly in the text box, or click the formula button on the right to enter the text in the formula editing interface.

    • Use HTML parsing text content: If the title is HTML text, the title can only be displayed correctly in the preview after clicking this button; otherwise it will be displayed as a string by default.

    • Position: Left, Center, or Right. It is set as Center by default.

    • Character: Set the Font, Size, Color, Italic and Bold of the characters.

    • Rotation: Set the rotation angle of the title from - 90° to 90°.

     1.gif


    2. Label

    Here you can set the label style of the axis, i.e., the style of category name of the axis. It is noteworthy that [Style]>[Label] of the chart attributes refers to the label settings of the series and the [label] in [Style]>[Axis] refers to the axis label.

    • Display/Hidden: You can choose whether or not to hide the label.

    • Axis Label: You can set whether or not to display the axis label.

    • Character: Set the Font, Size, Color, Italic and Bold of the characters.

    • Rotation: Set the rotation angle of the label from - 90° to 90°.

    • Interval: Options available include [Automatic] and [Fixed]. When [Automatic] is selected, if a label is covered by the previous label, the label will not be displayed until it will not be covered by other labels. When [Fixed] is selected, the labels will be displayed at fixed intervals.

     2.gif


    3. Axis Line Style

    Here you can set the axis line style.

    • Line Style: The styles of line that can be used.

    • Color: Set the color of the axis.

    • Main Tick: Set whether to enable the Main Tick or not.

    • Minor Tick: Set whether to enable the Minor Tick or not.

    Note: The Minor Tick settings in sections 4 and 5 are meaningful only when the Minor Unit is enabled.

     3.gif


    4. Value Definition (not applicable to X Axis)

    Here you can define the value displayed on the Y Axis and the value of the Unit.

    • Custom Maximum: When the box is checked, you can customize the maximum value.

    • Custom Minimum: When the box is checked, you can customize the minimum value.

    • Custom Main Tick: Main Tick can be defined by typing a formula.

    • Custom Minor Tick: Minor Tick can be defined by typing a formula.

    • Custom Logarithmic Base: When the box is checked, you can customize the logarithmic base axis.

    Note: For bar charts, the axes are reversed, i.e., this setting is applicable to the X Axis only, and not to the Y Axis.

     4.gif


    5. Custom Multi-Axis (not applicable to X Axis)

    For charts with multiple axes (Custom Column Chart, Bar Chart, Line Chart, Area Chart and Combination Chart), you can customize the position and style of the axes. Take the Custom Column Chart as an example.

    1) Add an Axis

    You can choose to add an X axis or Y axis under [Style]>[Axis] in the properties panel of the Custom Column Chart. Click [+] to add two Y Axes.

     图片9.png

    2) Set the two Y Axes separately.

    The new series 2 (the second Y Axis) and series 3 (the third Y Axis) will share the same Y Axis with the series 1 by default. Now we need to set a separate Y Axis for series 2 and series 3.

    • Select [Style]>[Series]>[Stacked and Axis], click [+], and select the new stacked axis.

     图片10.png

    • Select y axis2, with the condition being Series index equal to 2, and select the numeric format. Click [Add].

     图片11.png

    • Likewise, add a stacked axis and use y axis3 for series 3.

     图片12.png

    • Go back to [Style]>[Axis] and you can set the style for the second or third Y Axis. For example, you can adjust the position of the axis.

     5.gif

    Note: For bar charts, the axes are reversed, i.e., this setting is applicable to the X Axis only, and not to the Y Axis.


    6. Position

    Here you can set the position of the axis.

    • Axis Label Setting: You can set where to display the labels of X Axis and Y Axis.

      • By default, X Axis is displayed at the bottom and Y Axis on the left.

      • If the axis label position is set to a value of Zero, the Zero value labels of all axes perpendicular to the axis are aligned and the number of interval scales for each numeric axis is the same.

    • Axis Reverse: To display the axis in reverse order, just enable the Axis Reverse function.

     6.gif


    7. Display Strategy

    Here you can control the axis display area. There is no limitation on the area by default. When [Limit] is selected, you can set the maximum proportion below.

     7.gif


    8. Format

    Here you can set the display format of the axis labels.

    • General: Set the general format.

    • Custom: Use custom labels and set the length and width of custom label images.

     8.gif

    Note: When a date in class datasets is used as the category of a column chart, the format settings of the X Axis will not take effect. In this case, convert the type of date to string.

    V. Axis Style - X Axis as Time Axis

    When the X Axis of the chart is a date in the format of YYMMDD, and you want to display the data in time series, you can set the X Axis as the Time Axis.

    1) Take Line Chart as an example. After setting the Time Axis, the axis style setting is similar to that described in IV. Axis Style -X-Axis as Category Axis.

     图片17.png

    2) The difference lies in that Value Definition is also available for the X Axis.

    • Custom Maximum Value and Minimum Value: you can choose a date here.

    • You can also set the display unit of the axis, such as Year, Month, Day, Hour, Minute, and Second.

     9.gif

    Note: The Time Axis is only applicable to Column Chart, Line Chart, Bar Chart, Area Chart and Combination Chart.

    VI. Axis Style - X Axis as Value Axis

    When the X Axis is a numeric value, you can choose the X Axis as the Value Axis. The data in the chart can be displayed from small to large by the size of data of the X Axis.

    1) Take Line Chart as an example. After setting the Value Axis, the axis style setting is similar to that described in IV. Axis Style -X-Axis as Category Axis.

     图片19.png

    2) The difference lies in that Value Definition is also available for the X Axis. The same as in IV. Axis Style -X-Axis as Category Axis - 4. Value Definition.

     图片20.png

     

    Attachment List


    Theme: Chart
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback