Chart Color

  • Last update:July 31, 2024
  • Overview

    Version

    FineBI Version

    Functional Change

    6.0

    /

    Application Scenario

    You want to distinguish dimensions with colors in chart components.

    You want to highlight the top two sales values with colors when creating sales-related chart components.

    You want chart components to display data with an alert function, showing different colors when the data exceeds a certain value.

    You want chart components to have a gradient color effect.

    Function Description

    When you create a chart component, you can click the Color bar in Graphic Property to set the color for the chart component.

    7f4d24742a857fdc7c270b7d300f1fa.png

    Color Bar Settings Description

    Not Dragging Fields into the Color Bar/Dragging Dimension Fields into the Color Bar

    9443309f19d4bccf742a3c48cb8c72e.png

    Settings

    Description

    Scheme

    You can set colors using three methods: selecting colors from the recommended 

    colors, entering RGB color values, or entering hexadecimal color codes.

    Effect

    On: Turns on the gradient effect if enabled.

    Off: Turns off the gradient effect if enabled.

    Opacity

    You can set the opacity of the color.

    Border

    You can set the color for the border.

    Dragging Indicator Fields into the Color Bar

    6a318731b5951abe5817b95b49ccad0.png

    iconNote:
    This section does not describe the settings described in section "Not Dragging Fields into the Color Bar/Dragging Dimension Fields into the Color Bar."

    Settings

    Description

    Gradient Type

    You can select two color gradient types: Continuous Gradient and Area Gradient.

    Gradient Solution

    You can select the color solution based on the light/dark background.

    Gradient Interval

    1. Continuous Gradient

    When setting Gradient Interval to Custom, you can set the number of 

    intervals and the color of each interval value.'

    6a318731b5951abe5817b95b49ccad0.png

    2. Area Gradient

    When setting Gradient Interval to Custom, you can set the number of 

    intervals and the color of each interval.

    3f968a2613ff97ec409d7c281fd6fc1.png

    Example

    The section takes a general column chart as an example to introduce the use of the chart color function.

    Graphic Color Setting

    For example, if you want to change the column color, you can click the Color bar and change the color using three methods: selecting colors from the recommended colors, entering RGB color values, or entering hexadecimal color codes.

    ae318d7d849267c9c11946efc202d55.png

    Gradient Effect Setting

    You can set gradient effects for column charts, pie charts, area charts, and funnel charts.

    You can obtain the gradient effect by enabling On in Effect.

    fc10f26d416d9fb1afaafa17b62f664.png

    Auto Gradients Based on Values

    You can drag an indicator field into the Color bar to achieve the graphic gradient based on the size of the indicator value.

    iconNote:

    In this section, Gradient Interval is set to Auto. For the effect of Custom, see section "Different Colors for Different Value Intervals."

    Drag an indicator field into the Color bar, set Gradient Type to Continuous Gradient or Area Gradient, and set Gradient Interval to Auto.

    93cc8dea78eeb4c6e8fba23281414b7.png

    Different Colors for Different Value Intervals

    Implement method: You can drag an indicator field into the Color bar, set Gradient Type to Area Gradient, set Gradient Interval to Auto, and customize the number of intervals and the corresponding colors.

    Effect One:

    a5b1af406fcbb8e3519d4cf580e1cbd.png

    Effect Two:

    If you want to highlight the top three values or the top one value with different colors, you can divide the indicator values into different intervals and set a separate interval for the value you want to highlight and set a color for it.

    f6921bfb886dcfdf7f82fb3718ec60c.png

    Dimensions Distinguishing with Colors

    You can achieve the effect by dragging a dimension field into the Color bar.

    To distinguish the Day column with different colors, you can drag the dimension field Day into the Color bar. Each day has a different color, and the legend is automatically generated on the right side of the chart.

    c484b03f5462f319806dd1299cc0b6c.png

    Stacked Effect in a Column Chart

    Drag the field Day into the Color bar, click the 1343ef2026d45e38a63b3d894c48c4b.png icon next to the field Search Engine in Vertical Axis, and select Enable Stacking from the drop-down list. (You can stack the value of the field Search Engine by the value of the field Day.)

    5c50bd4445705658dc9c86fcbc1b35d.png

    附件列表


    主题: Visual Components
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy