Apache Echarts visualMap smooth transition of colors within and between pieces

Grafana Dashboards
1

Hi everyone,

I am currently using Grafana 10.0. I would like a graph that shows the extent to which a threshold value has been achieved. Any values less than the threshold value should progressively be assigned colors from red (furthest, either smaller or bigger depending on context, from the threshold) to a light shade of green (closest, either smaller or bigger depending on context, from the threshold); any values equal to or above the threshold value should progressively be assigned colors from light green to green.

This is what I have tried so far…

  visualMap: {
    min: 0,
    max: Math.max(...values),
    splitNumber: 10,
    inRange: {
      color: [
        'red',
        'yellow',
        'green'
      ],
    },
    outOfRange: {
      color: '#eee'
    },
    pieces: [
      {
        min: 0,
        max: 800000000,
        color: [
          'red',
          '#98FF98'
        ]
      },
      {
        min: 800000000,
        max: Math.max(...values),
        color: [
          '#98FF98',
          'green'
        ]
      }
    ],

What I expect is something similar to what I get without using pieces as shown below:
Screenshot 2024-01-18 at 14.19.58

Instead I am getting this…
Screenshot 2024-01-18 at 13.57.23

Any pointers on how to achieve this will be highly appreciated

2

@omunyaari Did you follow ECharts Examples when created it?

Here is the good example how to do it

3

@mikhailvolkov Yes I did follow all the examples. The one you have referred me to doesn’t use pieces. When I don’t use pieces it works fine just like in the example you have indicated. I would like to see one that uses defined sets of pieces to determine the colors as indicated in my question.