Tiny Animated Sparkline Chart Component For Vue.js

Install & Download:

# NPM
$ npm install vue-sparklines --save

Description:

A tiny animated sparkline chart component that also supports curve chart, bar/column chart, pie chart, dynamic data rendering, tooltip & reference line, and much more.

How to use it:

1. Install and import the sparkline chart component.

2. Create a basic sparkline chart.

<sparkline :indicatorStyles="spIndicatorStyles1">
  <sparklineLine :data="spData1" :limit="spData1.length" :styles="spLineStyles1" />
</sparkline>

export default {
  data () {
    return {
      spData1: (() => {
        const len = 50
        return Array.from({
          length: len
        }, () => Math.floor(Math.random() * len))
      })(),
      spIndicatorStyles1: false,
      spLineStyles1: {
        stroke: '#54a5ff'
      }
    }
  }
}

3. Create a curve chart.

<sparkline>
  <sparklineCurve :data="spData2" :limit="spData2.length" :styles="spCurveStyles2" />
</sparkline>

export default {
  data () {
    return {
      spData2: (() => {
        const len = 10
        return Array.from({
          length: len
        }, () => Math.floor(Math.random() * len))
      })(),
      spCurveStyles2: {
        stroke: '#54a5ff'
      }
    }
  }
}

4. Create a column chart.

<sparkline>
  <sparklineBar
  :data="spData4"
  :margin="spMargin4"
  :limit="spData4.length"
  :styles="spBarStyles4"
  :refLineStyles="spRefLineStyles4" />
</sparkline>

export default {
  data () {
    return {
      spData4: (() => {
        const len = 10
        return Array.from({
          length: len
        }, () => Math.floor(Math.random() * len))
      })(),
      spMargin4: 2,
      spBarStyles4: {
        fill: '#54a5ff'
      },
      spLineStyles4: {
        stroke: '#d14'
      },
      spRefLineStyles4: {
        stroke: '#d14',
        strokeOpacity: 1,
        strokeDasharray: '3, 3'
      }
    }
  }
}

5. Create a mixed chart.

<sparkline :styles="spStyles5">
  <sparklineLine :data="spData5" :limit="spData5.length" :styles="spLineStyles5" />
  <sparklineLine :data="spData6" :limit="spData6.length" :styles="spLineStyles6" />
</sparkline>

export default {
  data () {
    return {
      spStyles5: {
        background: '#ddd'
      },
      spData5: (() => {
        const len = 10
        return Array.from({
          length: len
        }, () => Math.floor(Math.random() * len))
      })(),
      spLineStyles5: {
        stroke: '#54a5ff'
      },
      spData6: (() => {
        const len = 30
        return Array.from({
          length: len
        }, () => Math.floor(Math.random() * len))
      })(),
      spLineStyles6: {
        stroke: '#d14'
      }
    }
  }
}

6. Create a pie chart.

<sparkline width="30">
  <sparklinePie :data="spData9" />
</sparkline>

export default {
  data () {
    return {
      spData9: this.rndData2()
    }
  },
  methods: {
    rndData2 (len = 20) {
      return Array.from({
        length: len % 2 === 0 ? 1 : 3
      }, () => {
        return {
          value: Math.floor(Math.random() * (len + 5)),
          color: `#${Math.floor(Math.random() * 16777215).toString(16)}`
        }
      })
    }
  },
  created () {
    setInterval(() => {
      this.spData9 = this.rndData2()
    }, 5000)
  }
}

Preview:

Changelog:

05/30/2022

• Vue3 edition