Creating linear gradient for kendo gauge range

Question

I'm trying to create a radial gauge using kendo react ui. Range colour should have a linear gradient like a rainbow. But as far as I find it allows only colours for different ranges. Is there any workaround for it? My code is:

import * as React from "react";
import * as ReactDOM from "react-dom";
import "./style.css";
import { RadialGauge } from "@progress/kendo-react-gauges";

const Progress = () => {
  const radialOptions = {
    rangeSize: 60,
    startAngle: 0,
    endAngle: 180,
    pointer: [
      {
        value: 10,
        color: "blue",
        cap: {
          size: 0.19,
        },
        length: 1,
      },
    ],
  };

  const { rangeSize, startAngle, endAngle } = radialOptions;

  return (
    <div>
      <RadialGauge
        pointer={{
          value: 60,
          color: "#0058e9",
          cap: {
            size: 0.2,
          },
          length: 1.5,
        }}
        transitions={true}
        scale={{
          rangeSize,
          startAngle,
          endAngle,
          ranges: [
            {
              from: 0,
              to: 100,
              color: "red",
            },
          ],
        }}
      />
    </div>
  );
};

export default Progress;

Documentation for the range colors: https://docs.telerik.com/kendo-ui/knowledge-base/gauge-radial-style-color-range

I tried manipulate the css for the svg file to apply the gradient.

score 1 · Answer 1 · answered Mar 21 '23 at 15:36

You can create an invisible SVG element on your page which defines the linear gradients and names them. Then in the gauge, you can set the range colors to those gradients using url(#gradientname).

E.g.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="0" height="0">
    <defs>
        <linearGradient id="grad1">
            <stop offset="0%" stop-color="#ffc700"/>
            <stop offset="100%" stop-color="#ffc700" stop-opacity="0.25" />
        </linearGradient>
        <linearGradient id="grad2">
            <stop offset="0%" stop-color="#ff7a00"/>
            <stop offset="100%" stop-color="#ff7a00" stop-opacity="0.25" />
        </linearGradient>
         <linearGradient id="grad3">
            <stop offset="0%" stop-color="rgba(255, 0, 0, 1)"/>
           <stop offset="20%" stop-color="rgba(255, 154, 0, 1)"/>
           <stop offset="40%" stop-color="rgba(208, 222, 33, 1)"/>
           <stop offset="60%" stop-color="rgba(79, 220, 74, 1)"/>
           <stop offset="80%" stop-color="rgba(47, 201, 226, 1)"/>            
        </linearGradient>
    </defs>
</svg>

then initialize the ranges:

 ranges: [
            {
              from: 80, to: 120,
              color: "url(#grad1)"
            }, {
              from: 120,to: 150,
              color: "url(#grad2)"
            }, {
              from: 150,to: 180,
              color: "url(#grad3)"
            }
         ]

DEMO

However, the gradient just goes from left to right, it does not follow the arc. For that you might have to look at something like this: https://github.com/cereallarceny/gradient-path

Creating linear gradient for kendo gauge range

1 Answers1