CODEWITHSUNDEEP
vue.jsvuetify.js
claw91
claw91

Reputation: 171

How to have values on Y axis with this Vuetify examples

I'm new to vue js and having troubles with one of the examples on the website.

I'm working on this example here of a simple chart.

<template>
  <v-card
    class="mx-auto text-center"
    color="green"
    dark
    max-width="600"
  >
    <v-card-text>
      <v-sheet color="rgba(0, 0, 0, .12)">
        <v-sparkline
          :value="value"
          color="rgba(255, 255, 255, .7)"
          height="100"
          padding="24"
          stroke-linecap="round"
          smooth
        >
          <template v-slot:label="item">
            ${{ item.value }}
          </template>
        </v-sparkline>
      </v-sheet>
    </v-card-text>

    <v-card-text>
      <div class="display-1 font-weight-thin">Sales Last 24h</div>
    </v-card-text>

    <v-divider></v-divider>

    <v-card-actions class="justify-center">
      <v-btn block text>Go to Report</v-btn>
    </v-card-actions>
  </v-card>
</template>

And this is the script part of it

<script>
  export default {
    data: () => ({
      value: [
        423,
        446,
        675,
        510,
        590,
        610,
        760,
      ],
    }),
  }
</script>

As you can see it's a very basic plot.

I want to know if I can add also values in the Y axis, and if so how because I'm confused given the official Vuetify page https://vuetifyjs.com/en/components/sparklines/ does not mention this at all unfortunately!

Please bear with me since I've never done front end before!

Thank you.

Upvotes: 4

Views: 2921

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362390

It appears this y-axis feature has been requested but declined by the Vuetify team:

https://github.com/vuetifyjs/vuetify/issues/6173

Upvotes: 4

Related Questions