How to generate more than 1 sparkline with Vuetify sparkline component?

user_11890525 0
Viewed 2199

Vuetify has a sparkline component that can be used to create simple graphs. https://vuetifyjs.com/en/components/sparklines

I can't figure out how to add more than one sparkline in the same graph. Something like adding a second list of values to the component.

If there's no way, maybe some of you know a more suited graph tool that I could use with Vue. 

<template>
  <v-sparkline
    :value="value"
    :gradient="gradient"
    :smooth="radius || false"
    :padding="padding"
    :line-width="width"
    :stroke-linecap="lineCap"
    :gradient-direction="gradientDirection"
    :fill="fill"
    :type="type"
    :auto-line-width="autoLineWidth"
    auto-draw
  ></v-sparkline>
</template>

<script>
  const gradients = [
    ['#222'],
    ['#42b3f4'],
    ['red', 'orange', 'yellow'],
    ['purple', 'violet'],
    ['#00c6ff', '#F0F', '#FF0'],
    ['#f72047', '#ffd200', '#1feaea'],
  ]

  export default {
    data: () => ({
      width: 2,
      radius: 10,
      padding: 8,
      lineCap: 'round',
      gradient: gradients[5],
      value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
      gradientDirection: 'top',
      gradients,
      fill: false,
      type: 'trend',
      autoLineWidth: false,
    }),
  }
</script>
vuetify.js vue.js javascript
1 Answers

In the code below, the first sparkline is attached normally to the v-sheet, while the second is stacked on top of the first sparkline.

<template>
  <v-sheet class="stackSheet" color="white">
    <v-sparkline
      :value="value1"
      color="blue"
      line-width="3"
      padding="10"
    ></v-sparkline>
    <v-sparkline
      class="stackSpark"
      :value="value2"
      color="red"
      line-width="3"
      padding="10"
    ></v-sparkline>
  </v-sheet>
</template>

<script>
  export default {
    data: () => ({
      value1: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
      value2: [7, 4, 7, 2, 9, 0, 1, 2, 4, 7, 7, 10, 1, 3, 5],
    }),
  }
</script>
<style lang="css" scoped>
.stackSheet {
    position: relative;
}
.stackSpark {
    position: absolute;
    top: 0;
    left: 0;
}
</style>
user_24950850
Related