Amend Map Colour Gradient Default

[MT_MANC]

We have a Map with colour gradient driven by (response) values from an external .CSV where values can be positive or negative. We want the values say of -2 (eg for country1) and +2 (eg for country2) to show the same colour depth on the map but the default seems to treat the +2 as darker than -2
So wondered if HighCharts/Maps can accommodate the following:
- apply same colour depth to +2 as -2 values but maintain the unique sign of the value on Map mouseover for country 1 and 2
- (optionally) apply a different colour to +ve and -ve values respectively
Appreciate any pointers and/or demos or intro jsfiddles to kick us off

[hubert.k]

Hi MT_MANC!
Unfortunately, something like you requested is not possible in Highcharts Maps. There is a Color Axis feature, but it is assigning color to the point based on the value of the point.

Docs: https://www.highcharts.com/docs/maps/color-axis
Demo: https://www.highcharts.com/demo/maps/color-axis

If you would like to see a feature like that implemented, feel free to create a feature request here: https://github.com/highcharts/highchart ... new/choose
With enough users' votes, we will gladly implement something like this.

Feel free to ask any further questions.
Kind regards!

[MT_MANC]

Understood - thanks for pointers.
So I suppose the elements of a possible, short-term, internal (React) code workaround would be:
a) Create additional/temporary "absolute" version of each external .CSV (maybe using a js "Absolute" function applied
to fetchCSVData below => fetchCSVDataABS ?) and & map-plot form this parallel .CSV ie CSVData
b) Use the original external .CSV data file (with +/- response sign) for Tooltip ( & any additional related time series Line Chart plotting) ie CSVDataABS

Code: Select all

const fetchCSVData = <T = CSVData>(url: string): Promise<T[]> => {
	return new Promise((resolve, reject) => {
		readRemoteFile<T>(encodeURI(`${baseServerPath}/${url}`), {
			header: true,
			dynamicTyping: true,
			complete: (res) => resolve(res?.data ?? []),
			error: (err) => reject(err),
			skipEmptyLines: true,
		});
	});
};

const fetchCSVDataABS  - Amend above code to produce "CSVdataABS" 

Is this a viable/effective workaround do you think given your HighCharts/Map knowledge ? (every seen such an "Absolute" js function used elsewhere with Highcharts/Maps ?)
Most kind

[hubert.k]

MT_MANC,
To be honest, I didn't make anything like that before, but your logic seems correct to me. To sum up, you will need to use two sets of data, one for showing on the map and the second (appropriately mapped to the first) to use as a tooltip of a map point. From my point of view, it should be an effective solution unless you will have thousands of points - then, I think, may appear some performance problems.

Regards!