Chart Color

Version

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.

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

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

Note:

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

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.

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.

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.

Note:

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.

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:

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.

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.

Stacked Effect in a Column Chart

Drag the field Day into the Color bar, click the  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.)