heat map is not clear

Question

Does anyone know how to set a colour range for this map? The variations between the values aren't large enough to notice the change in colour. So most of the values on the map appear to be in the same colour. I would either like to set my own colours or change much these colours vary by.

I cant find the answer on how to do this in react anywhere

import React, { Component } from 'react';
import AmCharts from "@amcharts/amcharts3-react";
import { connect } from "react-redux"
import { lookup } from 'country-data';
import * as adapter from "../Adapter.js";




class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            allCountriesHouseholdSpending: null,
            selectedCoutry: null,
            countrySpending: [{
                "id": "AU",
                "value": 4447100
            },
            {
                "id": "US",
                "value": 658188
            }]
        }
    }

    componentDidMount() {
        adapter.getAllCountriesrtyHouseholdSpending()
            .then(spendingData => this.setState({ allCountriesHouseholdSpending: spendingData }))
    }

    selectedCountrySpending = (country) => {
        let selectedCity = country.mapObject.enTitle
        if (selectedCity !== "Russia" && selectedCity !== "Venezuela" && selectedCity !== "Bolivia" && selectedCity !== "Svalbard and Jan Mayen" && selectedCity !== "Syria" && selectedCity !== "Tanzania" && selectedCity !== "Democratic Republic of Congo") {
            // console.log(lookup.countries({ name: selectedCity }));

            console.log(lookup.countries({ name: selectedCity })[0].alpha3);
            console.log('selected!', selectedCity)
            return selectedCity
        }
    }

    render() {
        const config = {
            "type": "map",
            "theme": "light",
            "colorSteps": 10,

            "dataProvider": {

                "map": "worldLow",
                "getAreasFromMap": true,
                "areas": [{
                    "id": "AU",
                    "value": 658188.6034,
                    "selected": true
                },
                {
                    "id": "AT",
                    "value": 217653.4063
                },
                {
                    "id": "BE",
                    "value": 255659.6354
                },
                {
                    "id": "CA",
                    "value": 896977.0966
                },


                ],



                valueLegend: {
                    divId: "legenddiv",

                    left: 10,
                    bottom: 0,
                    minValue: "little",
                    maxValue: "a lot!"
                },
            },


            "areasSettings": {
                "selectedColor": "#CC0000",
                "selectable": true,
                "balloonText": "National Spending in [[title]]: <b>[[value]]</b>"
            },

            "listeners": [{
                "event": "clickMapObject",
                "method": (e) => {
                    console.log(e.mapObject.enTitle)
                    this.selectedCountrySpending(e)
                }
            }]
        }
        return (

            <AmCharts.React style={{ width: "100%", height: "600px" }} options={config} />

        );
    }
}

const mapStateToProps = (state) => ({

})

const mapDispatchToProps = (dispatch) => ({

})

export default connect(mapStateToProps, mapDispatchToProps)(App)

Answer 1

You can customize the start and end colors by setting color and colorSolid in your areasSettings. You can also specify your own color by setting the color directly in the area object, e.g.

{
  "id": "AU",
  "value": 88323532,
  "color": "#00ff00"
},
// ...

Note that setting getAreasFromMap: true essentially enables all the other areas as if they were defined in the dataProvider, which may not be what you want.

Here's a demo of color and colorSolid:

var chart = AmCharts.makeChart("chartdiv",  {
  "type": "map",
  "theme": "light",
  "colorSteps": 10,

  "dataProvider": {

      "map": "worldLow",
      //"getAreasFromMap": true, 
      "areas": [{
          "id": "AU",
          "value": 658188.6034,
          "selected": true
      },
      {
          "id": "AT",
         // "color": "#0000ff", //if you want to specify a color directly on an area
          "value": 217653.4063
      },
      {
          "id": "BE",
          "value": 255659.6354
      },
      {
          "id": "CA",
          "value": 896977.0966
      },


      ],



      valueLegend: {
          divId: "legenddiv",

          left: 10,
          bottom: 0,
          minValue: "little",
          maxValue: "a lot!"
      },
  },


  "areasSettings": {
    "color": "#880000",
    "colorSolid": "#008888",
      "selectedColor": "#CC0000",
      "selectable": true,
      "balloonText": "National Spending in [[title]]: <b>[[value]]</b>"
  },

  "listeners": [{
      "event": "clickMapObject",
      "method": (e) => {
      }
  }]});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	width: 100%;
	height: 100%;
}

<script src="//www.amcharts.com/lib/3/ammap.js"></script>
<script src="//www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>