Sparkline Types in Vue Sparkline component

20 Jul 2021 / 5 minutes to read

Different types of shapes can be used to represent the sparkline. You can change the sparkline type by setting the type property. Sparkline supports the following types:

Line
Column
Win-Loss
Pie
Area

The following code sample shows different types of sparklines.

Line

The [Line] type is used to render the sparkline series as line.

Source

Preview

app.vue

<template>
<div class="control_wrapper">
<div class="spark">
    <ejs-sparkline id="sparkline" align="center" :dataSource='dataSource' xName='xval' yName='yval' :height='height' :type='type' :width='width'></ejs-sparkline>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SparklinePlugin } from "@syncfusion/ej2-vue-charts";
Vue.use(SparklinePlugin);

export default {
  data: function() {
return {
height: '100px',
width: '70%',
type:'Line',
dataSource: [
        { x: 0, xval: '2005', yval: 20090440 },
        { x: 1, xval: '2006', yval: 20264080 },
        { x: 2, xval: '2007', yval: 20434180 },
        { x: 3, xval: '2008', yval: 21007310 },
        { x: 4, xval: '2009', yval: 21262640 },
        { x: 5, xval: '2010', yval: 21515750 },
        { x: 6, xval: '2011', yval: 21766710 },
        { x: 7, xval: '2012', yval: 22015580 },
        { x: 8, xval: '2013', yval: 22262500 },
        { x: 9, xval: '2014', yval: 22507620 },
    ]
}
  }
}
</script>
<style>
.spark {
width: 100%;
height: 100%;
}
</style>

Column

The [Column] type is used to render the sparkline series as column.

Source

Preview

app.vue

<template>
<div class="control_wrapper">
<div class="spark">
    <ejs-sparkline id="sparkline" align="center" :dataSource='dataSource' xName='xval' yName='yval' :type='type' :height='height' :width='width'></ejs-sparkline>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SparklinePlugin } from "@syncfusion/ej2-vue-charts";
Vue.use(SparklinePlugin);

export default {
  data: function() {
return {
   height: '150px',
width: '200px',
type:'Column',
dataSource: [
        { x: 0, xval: '2005', yval: 20090440 },
        { x: 1, xval: '2006', yval: 20264080 },
        { x: 2, xval: '2007', yval: 20434180 },
        { x: 3, xval: '2008', yval: 21007310 },
        { x: 4, xval: '2009', yval: 21262640 },
        { x: 5, xval: '2010', yval: 21515750 },
        { x: 6, xval: '2011', yval: 21766710 },
        { x: 7, xval: '2012', yval: 22015580 },
        { x: 8, xval: '2013', yval: 22262500 },
        { x: 9, xval: '2014', yval: 22507620 },
    ]
}
  }
}
</script>
<style>
.spark {
width: 100%;
height: 100%;
}
</style>

Pie

The [Pie] type is used to render the sparkline series as pie.

Source

Preview

app.vue

<template>
<div class="control_wrapper">
<div class="spark">
    <ejs-sparkline id="sparkline" align="center" :dataSource='dataSource' xName='xval' yName='yval' :type='type' :height='height' :width='width'></ejs-sparkline>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SparklinePlugin } from "@syncfusion/ej2-vue-charts";
Vue.use(SparklinePlugin);

export default {
  data: function() {
return {
height: '200px',
width: '70%',
type:'Pie',
dataSource: [
        { x: 0, xval: '2005', yval: 20090440 },
        { x: 1, xval: '2006', yval: 20264080 },
        { x: 2, xval: '2007', yval: 20434180 },
        { x: 3, xval: '2008', yval: 21007310 },
        { x: 4, xval: '2009', yval: 21262640 },
        { x: 5, xval: '2010', yval: 21515750 },
        { x: 6, xval: '2011', yval: 21766710 },
        { x: 7, xval: '2012', yval: 22015580 },
        { x: 8, xval: '2013', yval: 22262500 },
        { x: 9, xval: '2014', yval: 22507620 },
    ]
}
  }
}
</script>
<style>
.spark {
width: 100%;
height: 100%;
}
</style>

Win Loss

The [WinLoss] type is used to render the sparkline series as Win Loss.

Source

Preview

app.vue

<template>
<div class="control_wrapper">
<div class="spark">
    <ejs-sparkline id="sparkline" align="center" :dataSource='dataSource' xName='xval' yName='yval' :type='type' :height='height' :width='width'></ejs-sparkline>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SparklinePlugin } from "@syncfusion/ej2-vue-charts";
Vue.use(SparklinePlugin);

export default {
  data: function() {
return {
height: '100px',
width: '70%',
type:'WinLoss',
dataSource: [
        { x: 0, xval: '2005', yval: 20090440 },
        { x: 1, xval: '2006', yval: 20264080 },
        { x: 2, xval: '2007', yval: 20434180 },
        { x: 3, xval: '2008', yval: 21007310 },
        { x: 4, xval: '2009', yval: 21262640 },
        { x: 5, xval: '2010', yval: 21515750 },
        { x: 6, xval: '2011', yval: 21766710 },
        { x: 7, xval: '2012', yval: 22015580 },
        { x: 8, xval: '2013', yval: 22262500 },
        { x: 9, xval: '2014', yval: 22507620 },
    ]
}
  }
}
</script>
<style>
.spark {
width: 100%;
height: 100%;
}
</style>

Area

The [Area] type is used to render the sparkline series as area.

Source

Preview

app.vue

<template>
<div class="control_wrapper">
<div class="spark">
    <ejs-sparkline id="sparkline" align="center" :dataSource='dataSource' xName='xval' yName='yval' :type='type' :height='height' :width='width'></ejs-sparkline>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SparklinePlugin } from "@syncfusion/ej2-vue-charts";
Vue.use(SparklinePlugin);

export default {
  data: function() {
return {
height: '100px',
width: '70%',
type:'Area',
dataSource: [
        { x: 0, xval: '2005', yval: 20090440 },
        { x: 1, xval: '2006', yval: 20264080 },
        { x: 2, xval: '2007', yval: 20434180 },
        { x: 3, xval: '2008', yval: 21007310 },
        { x: 4, xval: '2009', yval: 21262640 },
        { x: 5, xval: '2010', yval: 21515750 },
        { x: 6, xval: '2011', yval: 21766710 },
        { x: 7, xval: '2012', yval: 22015580 },
        { x: 8, xval: '2013', yval: 22262500 },
        { x: 9, xval: '2014', yval: 22507620 },
    ]
}
  }
}
</script>
<style>
.spark {
width: 100%;
height: 100%;
}
</style>