Gradient fails when values are greater than 100

[LukasB97]

With gradient=false

With gradient=true

to reproduce:

ranges=[ { "fieldId": 5, "from": 0, "to": 5000, "state": { "base": "info", "appId": 1, "createdAt": "2023-11-19T11:11:32.039109", "name": "Info", "id": 1, "hexColor": "#3498db", } }, { "fieldId": 5, "from": 5000, "to": 30000, "state": { "base": "error", "appId": 1, "createdAt": "2023-11-19T11:11:32.039109", "name": "Error", "id": 4, "hexColor": "#c0392b", } }, { "fieldId": 5, "from": 30000, "to": 70000, "state": { "base": "critical", "appId": 1, "createdAt": "2023-11-19T11:11:32.039109", "name": "Critical Error", "id": 3, "hexColor": "#e74c3c", } } ]

function generateTickValues(min: number, max: number, count: number): { value: number }[] {
    const step = (max - min) / (count - 1);
    const values: { value: number }[] = [];

    for (let i = 0; i < count; i++) {
        const value = Math.round(min + step * i);
        values.push({ value });
    }

    return values;
}

<GaugeComponent
            id={"gauge-component" + sensor.name}
            type="radial"
            style={{width: 300}}
            labels={{
                tickLabels: {
                    type: "inner",
                    ticks: generateTickValues(0, 70000, 6)
                }
            }}
            arc={{
                cornerRadius: 1,
                width: 0.12,
                padding: 0,
                gradient: true,
                subArcs: ranges.map(r => ({
                    limit: r.to,
                    color: r.state.hexColor || "#000000",
                    showTick: false,
                }))
            }}

            value={6}
            minValue={0}
            maxValue={70000}
            pointer={{type: "arrow", elastic: true}}
        />

[antoniolago]

Hello @LukasB97 Thanks for reporting this. I'll take a look when I get some spare time, but if anyone reading this wants to give it a shot, please feel free to :-)