# Color Range

FusionCharts comes along with some specialized chart types, gauges and all maps, which uses color to represent a range of data values. For example, in a heat map chart measuring the level of weekly attendance of a company, you can define colors red, yellow, blue and green to determine bad, average, good and excellent percentage of employee attendance respectively. When the chart is rendered the four levels can be easily distinguished by their respective colors.

Similarly, in the case of maps, while showing the average population growth across the continents of the world, you can distinguish the continents using different color codes based on the range of values for each continent.

Color Range is applicable for:

• Gauges like:

• Angular

• Bulb

• Linear

• Bullet

• LED

• Heat Map chart

• All maps

Let's understand the usage of color range for each of the above. To understand the color range let's take simple examples of an Angular Gauge, a Heat Map and a World Map showcasing the following:

• Angular Gauge - Number of customer complaints.

• Heat Map - Average Temperature in Fahrenheit for 4 cities of the US.

• World Map - Average Population Growth across continents

The color range set for the three is shown in the table below:

Angular Gauge Heat Map World Map
0 - 50 - Green 0 - 50 - Green 0.5M - 1M - Green
50 - 75 - Yellow 50 - 70 - Yellow 1M - 2M - Yellow
75 - 100 - Red 70 - 85 - Red 2M - 3M - Red

In this scenario, the values will appear in the following color:

• Angular Gauge - Any value below 50 will appear in `Green`. Similarly, any value below 75 but greater than equal to 50 will appear as `yellow` and the value 75 will appear in `Red`.

• Heat Map - The value 50 will appear in `yellow` and not in Green since the upper limit is exclusive for any range and the lower limit is inclusive for any range. Any value below 50 will appear in `Green`. Similarly, any value below 70 will appear as `yellow` and the value 70 will appear in `Red`.

• World Map - The value 1 Million will appear in the color `Yellow` and not in Green since the upper limit is exclusive for any range and the lower limit is inclusive for any range. Any value below 1 Million will appear in `Green`. Similarly, any value below 2 Million will appear as `yellow` and the values 2 Million and above will appear in `Red`.

Please note, there are values which are equal to upper limit of one color and the lower limit of the other. The value 50 will appear in the color yellow and not in red since the upper limit is exclusive for any range and the lower limit is inclusive for any range.

Similarly, there can be different situations where the range of values is set in a manner that they partially or completely overlap in two ranges or the value does not belong to any range. Let's discuss some of these special cases and see how the charts behave for such examples.

## Two range partially overlap

Let's take the same examples and see what happens when two range partially overlaps. For instance, the color range is defined as shown below:

Angular Gauge Heat Map World Map
0 - 50 - Green 0 - 50 - Green 0.5M - 1M - Green
43 - 75 - Yellow 43 - 70 - Yellow 0.7M - 2M - Yellow
75 - 100 - Red 70 - 85 - Red 2M - 3M - Red

The charts will look like as shown below:

In this scenario, the values will appear in the following color:

• Angular Gauge - The values 43 to 49 are overlapping the color `Green` and `Yellow`. In this scenario, values from 0-49 will appear as `Green`. Values from 50-74 will appear in `Yellow` and values from 75-100 will appear as `Red`.

• Heat Map - The values 43 to 49 are overlapping the color `Green` and `Yellow`. In this scenario, values from 0-49 will appear as `Green`. Values from 50-69 will appear in `Yellow` and values from 70-85 will appear as `Red`.

• World Map - The values from 0.7M to 0.9M are overlapping the color `Green` and `Yellow`. In this scenario, values from 0.5M - 0.9M will appear as `Green`. Values from 1M - 1.9M will appear in `Yellow` and values from 2M - 3M will appear as `Red`.

## Two range completely Overlap

Now, let's take the same examples and see what happens when two range completely overlaps. For instance, the color range is defined as shown below:

Angular Gauge Heat Map World Map
0 - 75 - Green 0 - 70 - Green 0.5M - 2M - Green
43 - 74 - Yellow 43 - 69 - Yellow 0.8M - 1.9M - Yellow
75 - 100 - Red 70 - 85 - Red 2M - 3M - Red

In this scenario, the values will appear in the following color:

• Angular Gauge - The values 0-75 completely overlap the two range for the color `Green` and `Yellow`. In this scenario, any values from 0-74 will appear in `Green` and any values from 75-100 will appear as `Red`.

• Heat Map - The values 0-70 are overlapping the color `Green` and `Yellow`. In this scenario, values from 0-69 will appear as `Green` and any values from values from 70-85 will appear as `Red`.

• World Map - The values from 0.7M to 0.9M are overlapping the color `Green` and `Yellow`. In this scenario, values from 0.5M - 1.9M will appear as `Green` and values from 2M - 3M will appear as `Red`.

## Same max value of two range

Now let's check what happens if two range has the same max value. For instance, the color range is defined as shown below:

Angular Gauge Heat Map World Map
0 - 75 - Green 0 - 70 - Green 0.5M - 2M - Green
50 - 75 - Yellow 50 - 70 - Yellow 1M - 2M - Yellow
76 - 100 - Red 71 - 85 - Red 2.1M - 3M - Red

In this scenario, the values will appear in the following color:

• Angular Gauge - The value 75 is the same for both `Green` and `Yellow`. Here, the value 75 will appear in `Yellow`.

• Heat Map - The value 70 is the same for both `Green` and `Yellow`. Here, the value 70 will appear in `Yellow`.

• World Map - The value 2M is the same for both `Green` and `Yellow`. Here, the value 2M will appear in `Yellow`.

## Same min value of two range

Now let's check what happens if two range has the same minimum value. For instance, the color range is defined as shown below:

Angular Gauge Heat Map World Map
0 - 50 - Green 0 - 50 - Green 0.5M - 1M - Green
0 - 75 - Yellow 0 - 70 - Yellow 0.5M - 2M - Yellow
75 - 100 - Red 70 - 85 - Red 2M - 3M - Red

In this scenario, the values will appear in the following color:

• Angular Gauge - The value 0 is the same for both `Green` and `Yellow`. Here, the value 0 will appear in `Green`.

• Heat Map - The value 0 is the same for both `Green` and `Yellow`. Here, the value 0 will appear in `Green`.

• World Map - The value 0.5M is the same for both `Green` and `Yellow`. Here, the value 0.5M will appear in `Green`.

## Values not belonging to any range

Now let's check what happens if there is a value which does not belong to any of the range. For instance, the color range is defined as shown below:

Angular Gauge Heat Map World Map
0 - 50 - Green 0 - 50 - Green 0.5M - 1M - Green
53 - 75 - Yellow 53 - 70 - Yellow 1.4M - 2M - Yellow
75 - 100 - Red 70 - 85 - Red 2M - 3M - Red
• Angular Gauge - There are two values 51 and 52 which are not mapped to any color. In this scenario, these values will appear as per the color of the previous range, which in this case is `Green`. In case the value is less than the minimum value (suppose minus 10), then it will take the color of the first range which is `Red`.