Successfully!

Error!

Custom the Position of Title&Legend

  • Last update:  2021-09-09
  • I. Overview

    1. Application scenarios

    Chart title and legend can be customized to hover positions beyond the system-given left, center, and right positions.

    The effect of the pie chart's customized floating position is as follows:

    1.png



    2. Function entry

    1) Title

    Under the chart attributes, click Floating Element > Style > Title > Layout, click Custom Floating Position to customize the position of the title from the top left corner of the chart, as shown below:

    2.png

    2) Legend

    Under the chart attributes, click Floating Element > Style > Legend > Layout, click Custom Floating Position to customize the position of the legend from the top left corner of the chart, as shown below:

    3.png

    Note: Drag the chart directly into the body of the dashboard. Custom legend position does not support mobile. But if the chart in the report block of the dashboard, custom legend position is supported on the mobile.

    II. Example

    1. Design the report

    Create a new built-in dataset, enter some data randomly, and insert a pie chart for simple data binding. As shown below:

    4.png


    2. Custom title position

    Select the pie chart, select Floating Element > Style > Title in the attributes panel, check the " Show Title" , click "Custom Floating Position", set "Direction X" to 28, "Direction Y" to 20, as shown below:

    5.png



    3. Custom legend position

    Select the pie chart, select Floating Element > Style > Legend in the attributes panel, check the " Legend Is Visible" , click "Custom Floating Position", set "Direction X" to 55, "Direction Y" to 34, as shown below:

    6.png



    4. Series color

    Select the pie chart, select Floating Element > Style > Series in the attributes panel, change the color scheme of the series to default, as shown below:

    7.png



    5. Preview effect

    1) PC

    Save the report, click Pagination Preview, the effect is as shown below:

    8.png


    2) Mobile

    The example uses floating chart that do not support mobile preview, but cell element chart do.

    III. Download template

    Please refer to the completed template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\PieChart\Title&Legend_Custom_Position.cpt

    Click to download: Title&Legend_Custom_Position.cpt

    Attachment List


    Theme: Chart
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback