Line gradient color : line stroke not being colored

[zillazillazilla]

Coming up on a dead end with gradients utilising the simple setup previously mentioned below.

Chart axis appear along with the .svg but the stroke with url(#color-id) isn't rendering, despite being identical in output to your docs example. The only difference in output with chrome/firefox outputting the html element <linearGradient> instead to lowercase <lineargradient>. Not sure if this would be an issue or not?

https://jsfiddle.net/eywraw8t/256740/

<div id="app">
<template>
  <la-cartesian :data="values">
    <defs>
      <linearGradient id="color-id" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#2c3e50"></stop>
        <stop offset="0.5" stop-color="#42b983"></stop>
        <stop offset="1" stop-color="#6fa8dc"></stop>
      </linearGradient>
    </defs>
    <la-line curve :width="2" prop="value" color="url(#color-id)"></la-line>
    <la-x-axis></la-x-axis>
    <la-y-axis></la-y-axis>
  </la-cartesian>
</template>
</div>

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/laue"></script>

<script>
  new Vue({
    el: '#app',
    data: () => ({
    values: [
      { value: -2 },
      { value: 2 },
      { value: 5 },
      { value: 9 },
      { value: 5 },
      { value: 10 },
      { value: 3 },
      { value: 5 },
      { value: 0 },
      { value: 1 },
      { value: 8 },
      { value: 2 },
      { value: 9 },
      { value: 0 }
    ]
  })
});
</script>

[QingWei-Li]

You should not use the SVG element in the html template

[zillazillazilla]

Okay thanks. So what is the proper usage to use gradients like your sparklines, but with the expanded charting features laue offers? (please forgive my lack of understanding but more noobs will likely attempt the same as I and have the same problems).

Following the guide and example I can't see what the difference between https://vuep.run/qingwei-li/laue/docs/_examples/line-gradient-color.vue?pkg=laue and the above is other than export default { or something vuep is doing under the hood that I am not.

Not trying to be spoon fed vue.js here, but is this something core/basic that I am missing that would explain how your example works but my jsfiddle doesn't?

[QingWei-Li]

You can put <linearGradient> inside <svg>

<div id="app">
<template>
  <la-cartesian :data="values">
    <svg>
      <defs>
      <lineargradient id="color-id" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#2c3e50"></stop>
        <stop offset="0.5" stop-color="#42b983"></stop>
        <stop offset="1" stop-color="#6fa8dc"></stop>
      </lineargradient>
    </defs>
    </svg>
    <la-line curve :width="2" prop="value" color="url(#color-id)"></la-line>
    <la-x-axis></la-x-axis>
    <la-y-axis></la-y-axis>
  </la-cartesian>
</template>
</div>

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/laue"></script>

<script>
  new Vue({
    el: '#app',
    data: () => ({
    values: [
      { value: -2 },
      { value: 2 },
      { value: 5 },
      { value: 9 },
      { value: 5 },
      { value: 10 },
      { value: 3 },
      { value: 5 },
      { value: 0 },
      { value: 1 },
      { value: 8 },
      { value: 2 },
      { value: 9 },
      { value: 0 }
    ]
  })
});
</script>

This is the processing logic of the vue parsing template, you can view the source code. But the parsing logic of an independent compiler is another. 🤷‍♀️

[zillazillazilla]

Ah I see, makes sense, don't know why I didn't try wrapping it in an