Color axis stops without gradient

[vishalpawar048]

Hi,

I have added stops with different colors in heatmap but I don't want to apply any gradient. eg. Values 80 to 100 should have the same color. (#53A7D1)

Also, want to highlight that max value can be 100 and 1000 also depending on the data.

Could you please help?

https://stackblitz.com/edit/react-npfup8?file=index.js

Thanks.

[vishalpawar048]

Also, I have tried dataClasseds but it hides my legend component.

[jakub.s]

Hi,

Thanks for the question!

As you can read in the API (https://api.highcharts.com/highcharts/colorAxis.stops)

Color stops for the gradient of a scalar color axis.

So by default colorAxis shows a gradient based on stops. If you want want to use colorAxis without gradient, you should change the stops in your example to something like that:

Code: Select all

stops: [
     	[0, "#ffffff"],
        [0.5, "#ffffff"],
        [0.51, "#B5D9EB"],
        [0.79, "#B5D9EB"],
        [0.80, "#53A7D1"],
        [1, "#53A7D1"],
    ],

By using the same colors on the opposing sides of the spectrum and small distances between the next "color segments" (ex. 0.79 and 0.80) you make sure that there is no gradient visible.

Let me know if you have any more questions.

Best regards,
Jakub

[vishalpawar048]

Thanksyou so much Jekub. This worked. But it updated Legend also. I want to keep the gradient on Legend.

[jakub.s]

I'm glad it helped.

Legend colors are based on the colors that appear in the series.

By changing the color stops and removing the gradient we made sure that all values between 0 and 25 have the same color. Thus, the legend will show the same color on this range.

Are you sure you want the legend to have a gradient even though your values would not be filled this way? That would make the chart's legend incongruent with the series.

Regards,
Jakub

[vishalpawar048]

Hi Jekub,

You are right. But we want the legend to be gradient only due to UX specifications. Is there any way to do that?

Thanks.

[jakub.s]

Sure, I understand.

1. First, define an SVG gradient in your HTML file (using defs & linearGradient). You can read more about gradients in SVG here: https://developer.mozilla.org/en-US/doc ... /Gradients

2. On each chart.events.render you will get the <rect> element which is supposed to have this gradient and change its fill attribute to your SVG gradient.

Here's a demo: https://jsfiddle.net/BlackLabel/re30va7k/

API: https://api.highcharts.com/highstock/ch ... nts.render

Let me know if you encounter any problems with this.

Regards,
Jakub