Legend with stops

[tomshanley]

I have a colourAxis with stops set to [[0, "#efecf3"], [0.25, "#dab1c7"], [0.5, "#c4769a"], [0.75, "#af3b6e"]]

The legend however shows a linear gradient from 0 to 1

Ideally I would like legend to show the stepped colour range, like the d3.scaleThreshold legend in here: https://observablehq.com/@d3/color-legend

Is there a setting or workaround to achieving this within Highcharts?

[dominik.c]

Hello tomshanley!

Welcome to our forum and thanks for contacting us with your question!

The legend range depends on your data. I think that you can achieve an effect from your link using stops from colorAxis in a proper way. Please look at the demo I've prepared for you and check if these settings help you.

API references: https://api.highcharts.com/highmaps/colorAxis.stops

Demo: https://jsfiddle.net/BlackLabel/mzk5fxdr/

Feel free to ask any further questions!
Regards.

[tomshanley]

Hi - I need the legend show only show the four possible colours, and not a gradient

here's my current example
https://observablehq.com/@tomshanley/highcharts-map

The stops are: [[0, "#efecf3"], [0.25, "#dab1c7"], [0.5, "#c4769a"], [0.75, "#af3b6e"]]

So I need the legend to show four blocks of colour, and not the gradient from #efecf3 to #af3b6e

the examples shown here for d3.scaleQuantize, d3.scaleThreshold or d3.scaleQuantile show the effect I need
https://observablehq.com/@d3/color-legend

[tomshanley]

I've updated my example with D3 hacky workaround to create the legend I need, but would prefer not to do this if possible
https://observablehq.com/@tomshanley/highcharts-map

please let me know if I can do this within the highcharts library

[dominik.c]

Hi again,

We can do a little trick with colorAxis stops, to get one color per section. Check out this demo and tell me if this option works fine for you: https://jsfiddle.net/BlackLabel/tbojupaq/

Regards!

[tomshanley]

Nice, that will do it!
thanks
Tom

[dominik.c]

You're welcome!

In case of any further questions, feel free to contact us again.