[Bug] Gauge chart: Progress axis color disappears on negative min max limit

[akashsonune]

Version

5.1.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=PYBwLglsB2AEC8sDeAoWsDOBTAThLGAXLANprrLkWxgCeIWxA5AOYCGAri1kwDRUUMYNjjABBaCwA2jWAEYAHAAZ-1dFmgATCdNkqB6ALYRoxfWtiG2AD2IBaAEwAWc2owgpEMADkOhgEa4xHIOqmpeWIYAynQyxKgW6ADGwFLAOMwAxACsCgAiAJwAYgV8BoIAFmyawADuAMKp6cw4LP5sABQqcgDMCrwO2dm8SgB0TtkAlGWJmFU1tQBCUhwZ8q4WGPN1APIAZnvYYAAaxKHl6FvVuwdHAJpn5QC-YdQgOMAsOARElLNbdWIYBwHCwrzUHw4WnqbBAQJBYIusFqEE0YAqwQUz3B6BAwBMYCCf0SEBSplgTBAbHRhAA9LSALIOJQFMY9ABsfQKvHZcmyox6LIKBVgABlmayBZyFNzefzBcKRfUJXJxgoegB2UJygVCkUShzjJR9Ho8uTs0ZyAouBwKWAG8ZOBTZWVyDUCkIFbLssUSi2s9kFfpahSjDVDAoOJUS91KbJ84YanqGjlejUa-0spyjBw9AqmpP8pzmhwhTOS9mDdns3iF0bepQau3KlljbJ9Ca1nr871OByB8tjCZyN1dnvVpRyJyDqVcsf1idT32t2cy-fe9mT6cthQWjVOJM1usbreZ9WjBQJjVdw2cvs9M89C9X2tR0aTjWBhywHdPy9Da8Q1GfMlGLb9mXPS8k1CICFCcHolwgv8ILkV9Q3DF0o2XBRQwcDVIzNd0EKjb0fwg0NkzzGteQtK0bTtCCChzJwXGvHUFWFGcOTndi9VgAAtGZEhkSQaQpcMAFIhIsFE0QxeQayRYBbiwMB6g0Qk1hIFQKWyKSAF1sXKGwIAwUUTFkBJEkhaFYXhUEcQoTxoCwGJaDiYlZlksTFCRJ4jIsEyMAAFVJABreIkXcTwfD8QI1nOWZnNc2JLKRdBvPkxLZlgFI0jWJhMkVJg_ICtwPC8cyXMipKNBYHzsosZK3I8qyvNRMTTXS3KmgKorhRK2Z_IsF5jOsUzRTYQIpBqxJNFM4RoCSWRBUc5JeqyYq1tgPYYDAKIIAAL1kZkyuoSAwFaqKKkBHa2CkbAzooTRVLYCAZs8tR2iSMKvmAKFNEafKsgOPZpK-9IXpwIHmgpfrSm2_xIdwAB1Dqsu2zLmE3KTtuSgAJLAIBYCowGIFxtoqImSbJ2AKaRJGcChgAlaoIA4X5-iUlS1I0oltN4CluwM7aADd7tBCQICsSAYHsxFZl2nAZc04g9ihJJZbgDpxZWLBJk-ixvjAVY4CYJBddBAAfJhYAAalgS2sFGMBgCKCBrCwTQugNh2mCeJAoS8K2wsMWkKieJgAG4_O2vAknktrEid2acp2vaDuO4hsg2HLdugMAUep0nmCRqQofB2Y8thwr0w1QactGtOg9ppPFYzo6TtzquNrhrbutxap5skYgBdgHTHB0uQlEMtPhsSefqCbtRNGpNhR6RNu1BT2A7GnpRSosWeKHnwynijoA

Steps to Reproduce

1. Open gauge chart
2. set min to 0 and max to -100
3. see that the progress color is disappeared

Current Behavior

When the min and max for the gauge chart is set to negative values (we have a requirement to show the gauge with negative values), the progress color fades away

Expected Behavior

The progress color should be retained irrespective of whether min max is negative/positive

Environment

- OS: Windows
- Browser: Chrome
- Framework: Angular 17

Any additional comments?

No response

[helgasoft]

try axisLine: { lineStyle: { color: [[1, 'transparent']] } },

[akashsonune]

We are actually doing something like this example where we set the color of progress to 'auto' meaning it should be taken from the axiline color. and we are hiding the axis line.

In this case when the max limit is negative, the progress color is black/disappearing

[Ovilia]

max should not be smaller than min so this is not a bug. In your case, you can set clockwise: false, startAngle: 0, endAngle: 180, min: -240, max: 0. If you want the progress arc to display from 0, you should set startAngle: -180, endAngle: 0, min: 0, max: 240 and do negation to all data and use formatter to add - for display.

[kingyue737]

I think it is a bug. The reproduction of OP is a little strange. Here is my reproduction, max is bigger than min:

https://echarts.apache.org/examples/en/editor.html?c=gauge-multi-title&code=MYewdgzgLgBA5gQwK5wKYBEFQTAvDAbQCgYYBvE0mANwQBslUAuGAWgDYAGAGktLAQBbZjADkAcRAgAJqN5UYUAJZQ6IigtIgAZtoiooAYVRgoqAE4sCo1gBZOAUjliAHI9EBdPjAC-8qtIGCEp0LBqaOnoGxqYWVjb2TtxiAJwArE5eCj6UfpThpLQMInY83gLCLKIAQgZm5nLeyqrq3lq6-kYm9fHuyaJumd55CoHYIWFtMJGdMT2Eon2pGZ7Duf4FNPSMLKwATGUKFSKiAAoW2qjAUI0KzWqTmtMd0d1xC4nOA-5ZVCMBQQm5CmM1esUsHyWonSQ2yuSIHgA3EQQAAHZTgPDA0j6cxKVAQKzeTakKAAT1RJ0QKFQt00giUYCYrAAjJxDvSEAAPZks_wKBBgYAACxAEJJVAgooA7iwoOZGPzNFKQNKAIIAIxA1BE8sVUxxSgAXiIWS4lQoVKhBABlckPbFPKigOhiqoAYgAYmrDC40i5RAbfFN_gpUSBGfMJaQlKAmWJUVhhUwAPQpgCyewAdCluJwswB2AAy2dz-YLwBZWdsee42fY3CrezrWYb9eoLJZaWAPCrtlZWeb9f2rZb7DoPE4wAHNc4I_YA728_nADUAMxZteGfNrxs5vezwstsuFo10p7SpTSKDJmDmoNqMBwG9VQbniIvLrgqw8VywzShlQqLmCAcDmAShKOk8KqyooCqoBaVDahYdAIKicrwYhpAgUgYDSIYaEYYwIaIdySgQEWjKtE6MA4XhBHoXBxFPIBpDSFgCAsNSaCYNgiH3NRTraOAUA2sapq2CRUxjMEoRQZol7Xre9hYTAwqoEocDClALAsjWQbCaYYkmrp-k0S6bpiO6ujaO-CgaggwAANZgSAuH4SAroQqIjLqXiNyqVq5iBOYABKCDSEoSCQbuBlioIWDzKIZBFIwPhOCGaykF4PiIkAA

You can toggle the theme to dark. Then we will find that yellow progress is on the top while the blue should. The order is inverted. That is what I aim to fix in #20276

[Ovilia]

Thanks. The above demo is a bug.