graphieros/vue-data-ui v3.15.3 on GitHub

VueUiSparkline

Add optional gradient path mode

const config = computed(() => {
  gradientPath: {
    show: false, // set to true to enable
    segments: 256, // the number of DOM nodes the gradient will add. Be warned ^^
    colors: {
      high: '#34eb96',
      low: '#eb4034'
    }
  }
})

🔗 View example

🔗 Check out VueUiSparkline documentation

Note

The only way to apply a gradient that follows a path in SVG is to chunk it into sub paths with evolving shades.
Each sub path is an additional DOM node. You can control the number of sub paths by setting the segments value. If the value is too small, segments might show. If the number is too high, you take the risk of bloating your HTML with too many DOM nodes.