Special points customization in Vue Sparkline component

16 Mar 20235 minutes to read

You can customize the points by initializing the point colors. The customization options allows to differentiate the [start], [end], [positive], [negative], and [low] points. This customization is only applicable for line, column, and area type sparklines.

app.vue

<template>
    <div class="control_wrapper">
    <div class="spark">
        <ejs-sparkline id="sparkline" align="center" :dataSource='dataSource':highPointColor ='highPointColor' :lowPointColor= 'lowPointColor' :startPointColor ='startPointColor' :endPointColor='endPointColor' :negativePointColor='negativePointColor' :type='type' :valueType='valueType' 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: '130px',
    dataSource: [
            { x: 0, xval: 'AUDI', yval: 1 },
            { x: 1, xval: 'BMW', yval: 5 },
            { x: 2, xval: 'BUICK', yval: -1 },
            { x: 3, xval: 'CETROEN', yval: -6 },
            { x: 4, xval: 'CHEVROLET', yval: 0 },
            { x: 5, xval: 'FIAT', yval: 1 },
            { x: 6, xval: 'FORD', yval: -2 },
            { x: 7, xval: 'HONDA', yval: 7 },
            { x: 8, xval: 'HYUNDAI', yval: -9 },
            { x: 9, xval: 'JEEP', yval: 0 },
            { x: 10, xval: 'KIA', yval: -10 },
            { x: 11, xval: 'MAZDA', yval: 3 },
        ],
    type:'Column',
    valueType: 'Category',
    highPointColor:'blue',
    lowPointColor:'orange',
    startPointColor:'green',
    endPointColor:'green',
    negativePointColor:'red'
    }
  }
}
</script>
<style>
.spark {
    width: 100%;
    height: 100%;
}
</style>

Tie point color

Tie point color is used to configure the win-loss series type sparkline’s y-value point color. The following code sample shows the tie point color of sparkline series.

app.vue

<template>
    <div class="control_wrapper">
    <div class="spark">
        <ejs-sparkline id="sparkline" align="center" :dataSource='dataSource' :tiePointColor='tiePointColor' :type='type' :valueType='valueType' :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: '130px',
    dataSource: [12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10],
    // Assign the 'WinLoss' as type of Sparkline
    type:'WinLoss',
    // Assign "Numeric" as the value type of the sparkline
    valueType: 'Numeric',
    tiePointColor:'blue'
    }
  }
}
</script>
<style>
.spark {
    width: 100%;
    height: 100%;
}
</style>