Contents
- Size for container
- Size for sparkline
Having trouble getting help?
Contact Support
Contact Support
Sparkline dimensions in Vue Sparkline component
16 Mar 20239 minutes to read
Size for container
Sparkline can be rendered to its container size. You can set the size through inline or CSS as shown in the following code.
<template>
<div class="control_wrapper">
<div class="spark">
<ejs-sparkline id="sparkline" align="center" :dataSource='dataSource' xName='xval' yName='yval' :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: '350px',
width: '650px',
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>
Size for sparkline
You can also set the size for sparkline directly using the width
and height
properties.
In pixel
You can set the size for sparkline in pixel as demonstrated in the following code.
<template>
<div class="control_wrapper">
<div class="spark">
<ejs-sparkline id="sparkline" align="center" :dataSource='dataSource' xName='xval' yName='yval' :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: '350px',
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>
In percentage
By setting values in percentage, sparkline gets its dimension with respect to its container. For example, when the height is set to ‘50%’, sparkline is rendered to half of its container height.
<template>
<div class="control_wrapper">
<div class="spark">
<ejs-sparkline id="sparkline" align="center" :dataSource='dataSource' xName='xval' yName='yval' :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: '50%',
width: '80%',
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>